如何实现点击class为word的div子元素时将其删除？

这里提供几种实用的实现方式，适配不同场景：

方案1：事件委托（推荐，支持动态添加元素） #

利用事件冒泡机制，给父容器alphabets绑定点击事件，判断点击目标是否为.word元素后执行删除操作。这种方式的优势在于，后续通过JS动态添加的.word子元素，点击删除功能依然能正常生效。

// 获取父容器
const alphabetsContainer = document.querySelector('.alphabets');

// 给父容器绑定点击事件
alphabetsContainer.addEventListener('click', function(e) {
  // 判断点击的元素是否是目标类别的div
  if (e.target.classList.contains('word')) {
    // 删除被点击的元素
    e.target.remove();
  }
});

方案2：直接给子元素绑定点击事件 #

如果页面加载后子元素不会动态变化，可以直接遍历所有.word元素，给每个元素单独绑定点击删除事件：

// 获取所有.word元素
const wordElements = document.querySelectorAll('.word');

// 遍历绑定事件
wordElements.forEach(word => {
  word.addEventListener('click', function() {
    this.remove();
  });
});

补充：jQuery实现方式（项目已引入jQuery时可用） #

如果你的项目已经使用jQuery，可以用更简洁的代码实现需求：

// 事件委托方式（支持动态元素）
$('.alphabets').on('click', '.word', function() {
  $(this).remove();
});

// 直接绑定方式（仅适用于静态加载的元素）
$('.word').click(function() {
  $(this).remove();
});

所有方案的核心逻辑一致：监听点击事件，定位到被点击的.word元素，调用remove()方法将其从DOM中移除。

内容的提问来源于stack exchange，提问作者Kondaveti Charan