如何点击x按钮时使用JavaScript移除div标签内容？

没问题，我来帮你实现这个需求！咱们可以通过JavaScript的事件监听来完成，这里推荐用事件委托的方式，不仅能处理现有元素，还能兼容后续动态添加的项，更灵活高效。

实现思路 #

1. 给最外层的父容器#rang绑定点击事件（利用事件冒泡特性实现委托）
2. 判断点击的元素是不是我们要的"x"按钮
3. 确认后找到该按钮对应的父级.clsrng元素并移除

完整代码示例 #

先整理下你的HTML（调整了格式，同时建议把第二个span的类名改成close-btn，避免和父div类名重复，代码可读性更高）：

<div id="rang">
  <div class="clsrng">
    <span class="spnrng">one</span>
    <span class="close-btn">x</span>
  </div>
  <div class="clsrng">
    <span class="spnrng">two</span>
    <span class="close-btn">x</span>
  </div>
  <div class="clsrng">
    <span class="spnrng">three</span>
    <span class="close-btn">x</span>
  </div>
</div>

对应的JavaScript代码：

// 获取父容器
const rangContainer = document.getElementById('rang');

// 绑定点击事件（事件委托核心）
rangContainer.addEventListener('click', function(e) {
  // 判断点击目标是不是x按钮
  if (e.target.classList.contains('close-btn') || e.target.textContent === 'x') {
    // 向上查找最近的.clsrng父元素
    const targetItem = e.target.closest('.clsrng');
    if (targetItem) {
      // 移除该元素
      targetItem.remove();
    }
  }
});

代码细节说明 #

• 事件委托：不给每个x按钮单独绑定事件，而是绑定在父容器上，既节省性能，还能自动适配后续动态添加的新项
• e.target：获取实际被点击的DOM元素
• closest('.clsrng')：向上查找最近的带有clsrng类的父元素，比parentNode更可靠，就算HTML结构微调也不容易出错
• remove()：直接从DOM树中移除目标元素，完成删除操作

如果不想修改原HTML的类名（保持第二个span的类为clsrng），可以调整判断条件：

rangContainer.addEventListener('click', function(e) {
  // 同时判断元素类型、类名和内容，避免误触发
  if (e.target.tagName === 'SPAN' && e.target.classList.contains('clsrng') && e.target.textContent === 'x') {
    const targetItem = e.target.closest('.clsrng');
    if (targetItem) {
      targetItem.remove();
    }
  }
});

这样也能正常工作，不过还是建议给按钮设置独立的类名，代码逻辑会更清晰~

内容的提问来源于stack exchange，提问作者aparna rai