本文介绍如何使用原生 javascript 的事件委托机制，精准删除触发事件的按钮所在父元素，避免 id 冲突与重复绑定问题，同时支持动态添加的元素。
在实际开发中，直接通过 id 获取并操作 DOM 元素（如 document.getElementById('div-list').remove()）存在明显缺陷：ID 必须全局唯一，一旦页面中存在多个同名 ID（即使不符合规范，现实中仍常见），getElementById 仅返回第一个匹配元素，而 .remove() 又会误删所有目标结构——更严重的是，这种写法无法区分“是哪个按钮被点击”，导致逻辑失控。
你已发现内联 onclick="this.parentElement.remove()" 可行，但它将逻辑耦合在 HTML 中，违背关注点分离原则，且不利于维护与测试。更专业、可扩展的方案是：使用事件委托（Event Delegation） + closest() 方法。
✅ 推荐方案：事件委托 + closest()
核心思想是：不在每个按钮上单独绑定事件，而是将监听器绑定到共同祖先容器（如 .items），利用事件冒泡机制捕获点击，并通过 e.target 判断是否为目标按钮，再用 closest('.item') 向上查找最近的语义化父容器并移除。
<div class="items">
<div class="item">
Item 1
<button class="remove">Remove</button>
</div>
<div class="item">
Item 2
<button class="remove">Remove</button>
</div>
<!-- 可动态追加更多 .item -->
</div>// 绑定一次，永久生效（含后续动态插入的元素）
document.querySelector('.items').addEventListener('click', (e) => {
// 检查点击目标是否为带 remove 类的按钮
if (e.target.classList.contains('remove')) {
// 向上查找最近的 .item 父级并移除（健壮性强于 parentElement）
e.target.closest('.item').remove();
}
});? 为什么推荐 closest() 而非 parentElement？
- e.target.parentElement 仅获取直接父节点，若未来 HTML 结构微调（例如在按钮和 .item 之间新增一层 ），该逻辑即失效；
- e.target.closest('.item') 会向上遍历整个祖先链，直到找到第一个匹配 .item 的元素，对结构变更具备天然容错能力，显著提升代码健壮性与可维护性。
⚠️ 注意事项
- 确保祖先容器（如 .items）在脚本执行时已存在于 DOM 中；若元素动态生成，建议将事件监听器挂载在 document 或 body 上（需谨慎性能）；
- 避免滥用 id 实现批量操作——应改用语义化类名（.item, .remove）配合 CSS 选择器；
- 若需兼容 IE11，请注意 closest() 需 Polyfill，或改用 e.target.parentNode + 循环判断（不推荐，增加复杂度）。
此方案兼顾简洁性、可维护性与扩展性，是现代前端处理“多实例交互”的标准实践。
