如何通过纯JavaScript实现仅删除触发点击事件的按钮的父元素

嘿，我完全懂你的困扰！原来的代码通过固定ID获取父元素，点击按钮后会误删所有同ID的元素——这显然不是你想要的精准删除效果。你提到已经有个内嵌onclick的可行方案，但想要纯JavaScript（代码与HTML分离）的实现方式，下面给你两种实用的思路：

方法一：利用事件对象的target属性（多按钮场景友好） #

通过事件参数e获取触发点击的按钮元素，再定位到它的父元素进行删除，这种方式尤其适合页面存在多个同类按钮的场景：

// 获取所有需要绑定事件的按钮（用类选择器更灵活，避免ID重复问题）
const buttons = document.querySelectorAll('.button-submit');

// 给每个按钮绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', function(e) {
    // e.target就是当前被点击的按钮，直接删除它的父元素
    e.target.parentElement.remove();
  });
});

说明：用querySelectorAll获取同类型的按钮集合，遍历绑定事件后，每个按钮点击时只会删除自己的父元素，完全不会影响其他元素。

方法二：使用this关键字（单个按钮场景更简洁） #

如果只是单个按钮的需求，用this会更省心——在普通函数（非箭头函数）的事件回调里，this指向触发事件的按钮本身：

// 获取目标按钮
const button = document.querySelector('#button-submit');

// 绑定点击事件
button.addEventListener('click', function() {
  // this就是当前点击的按钮，直接删除它的父元素
  this.parentElement.remove();
});

小提醒：HTML规范里同一页面的ID必须唯一，所以尽量避免多个元素用同一个ID哦，用类选择器会更合规。

这两种方式都实现了代码与HTML分离的纯JavaScript写法，能精准删除点击按钮对应的父元素，不会出现误删其他元素的问题。

备注：内容来源于stack exchange，提问作者Ninja MB7