原生JS实现点击按钮删除其父级li元素的方法咨询

嘿，我来帮你搞定这个问题！你当前代码只能删除第一个li，核心原因有两个：一是HTML里多个删除按钮用了相同的id="del"——但id在页面中必须是唯一的，所以getElementById只能获取到第一个按钮；二是你只给第一个按钮绑定了点击事件，自然只能操作第一个li。下面给你两个无需框架、完全可复用的原生JS方案：

方案1：事件委托（推荐，灵活又高效） #

事件委托利用了DOM的事件冒泡机制，把点击事件绑定在父级的<ul>上，不管现在有多少li，哪怕后续动态新增的li，这个事件都能生效，不用重复绑定。

首先修改HTML，把重复的id="del"改成可复用的class="del"：

<h1>The List</h1>
<ul id="myList">
  <li>Delete me<button class="del">x</button></li>
  <li>Delete me too<button class="del">x</button></li>
</ul>

然后写JS代码：

// 获取父级ul元素
const listContainer = document.getElementById('myList');

// 给ul绑定点击事件
listContainer.addEventListener('click', function(e) {
  // 判断点击的是不是删除按钮
  if (e.target.classList.contains('del')) {
    // 找到按钮所在的最近的li父元素
    const targetLi = e.target.closest('li');
    // 如果找到就删除它
    if (targetLi) {
      targetLi.remove();
    }
  }
});

这里的e.target是实际被点击的元素，我们通过判断它的类名确认是删除按钮，再用closest('li')精准定位到它所属的li，最后调用remove()直接删除就行。

方案2：给每个按钮单独绑定事件 #

如果你更习惯直接给每个按钮绑事件，也可以这么做，同样先把HTML里的id改成class：

<h1>The List</h1>
<ul>
  <li>Delete me<button class="del">x</button></li>
  <li>Delete me too<button class="del">x</button></li>
</ul>

然后编写JS：

// 获取所有带del类的按钮
const deleteButtons = document.querySelectorAll('.del');

// 遍历每个按钮，绑定点击事件
deleteButtons.forEach(button => {
  button.addEventListener('click', function() {
    // this指向当前被点击的按钮，parentElement找到它的父元素li
    const parentLi = this.parentElement;
    parentLi.remove();
  });
});

这个方法会给每个删除按钮单独绑定事件，点击时通过this.parentElement找到对应的li并删除。不过要注意：如果后续动态添加新的li和删除按钮，需要重新给新按钮绑定事件，而事件委托就没有这个麻烦。

额外提醒 #

• 一定要记住：HTML页面中id必须唯一，重复id不仅会导致选择器失效，还不符合规范，复用样式或行为请用class。
• 如果需要兼容非常老旧的浏览器（比如IE），可以把targetLi.remove()换成targetLi.parentElement.removeChild(targetLi)，不过现在主流浏览器都支持remove()方法了。

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