如何实现点击删除按钮移除对应的list group item元素？

你的代码存在几个关键问题，导致无法删除整个li元素：

• 两个按钮的id都是btn1，HTML中id必须唯一，这会导致元素选择逻辑出错
• JS里elem.this是无效语法，正确获取父元素的方式是elem.parentNode
• 错误调用了id.remove()，应该直接对li元素调用remove()方法

修正后的代码 #

JavaScript

function remove(ev) {
  // 获取点击的按钮元素
  const btn = ev.target;
  // 获取按钮的父元素li
  const listItem = btn.parentNode;
  // 删除li元素
  listItem.remove();
}

HTML

<ul class="list-group">
  <li class="list-group-item">
    <p>Item 1</p>
    <button type="button" id="btn1" onclick="remove(event)" class="Button">Click</button>
  </li>
  <li class="list-group-item">
    <p>Item 2</p>
    <button type="button" id="btn2" onclick="remove(event)" class="Button">Click</button>
  </li>
</ul>

更简洁的写法（可选） #

不需要通过id获取元素，直接利用事件对象的target属性定位父元素：

function remove(ev) {
  ev.target.parentNode.remove();
}

这样点击按钮时，就能直接删除对应的整个列表项了。

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