如何在JavaScript中点击子元素图标删除父级div

算力阿峰

2026-8-12

问题分析与解决方案

你的代码核心问题出在闭包陷阱和事件绑定逻辑错误：

循环中定义的deleteRow函数共享同一个x变量，循环结束后x最终指向最后一个.selectionRow元素，所以点击任何删除按钮都会删除最后一个卡片。
点击事件没有传递当前元素的上下文，无法精准定位要删除的目标容器。

快速修复方案（直接修改现有代码）

步骤1：修改HTML的点击事件

把每个删除按钮的onclick="deleteRow()"改成onclick="deleteRow(this)"，传递当前点击的元素：

<div class="delete-selection-btn" onclick="deleteRow(this)" id="Div4">X1</div>
<div class="delete-selection-btn" onclick="deleteRow(this)" id="Div1">X2</div>
<div class="delete-selection-btn" onclick="deleteRow(this)" id="Div2">X3</div>

步骤2：重写JS函数

去掉循环，直接通过传入的元素向上查找要删除的父级.mycards容器：

function deleteRow(el) {
  // 向上查找最近的.mycards父元素并删除
  el.closest('.mycards').remove();
}

更优方案：事件委托（推荐）

如果后续会动态添加卡片，事件委托更合适，不需要给每个按钮单独绑定事件：

步骤1：去掉HTML中的所有`onclick`属性

<div class="delete-selection-btn" id="Div4">X1</div>
<div class="delete-selection-btn" id="Div1">X2</div>
<div class="delete-selection-btn" id="Div2">X3</div>

步骤2：JS绑定全局点击事件

document.addEventListener('click', function(e) {
  // 判断点击的元素是否是删除按钮
  if (e.target.classList.contains('delete-selection-btn')) {
    // 找到对应的父级卡片并删除
    e.target.closest('.mycards').remove();
  }
});