本文详解在事件委托场景下为何 event.currentTarget.parentNode.remove() 失效，并提供基于 event.target.closest() 的可靠解决方案，避免因事件目标错位导致的 DOM 操作失败。
本文详解在事件委托场景下为何 `event.currenttarget.parentnode.remove()` 失效，并提供基于 `event.target.closest()` 的可靠解决方案，避免因事件目标错位导致的 dom 操作失败。
在将 jQuery 习惯迁移到原生 JavaScript 时，一个常见误区是混淆 event.target 与 event.currentTarget —— 尤其在使用事件委托（如为 document 绑定全局点击监听）时，这一差异会直接导致 DOM 删除逻辑失效。
你的代码中：
if (event.target.classList.contains('delete')) {
event.currentTarget.parentNode.remove(); // ❌ 错误！
}
问题根源在于：你为 document 添加了事件监听器，因此 event.currentTarget 始终是 document 对象，而非被点击的 .delete 元素。调用 document.parentNode.remove() 显然无效（且危险）。
更隐蔽的问题是：.delete 按钮内部嵌套了 <i></i> 图标，用户实际点击的可能是 <i></i> 元素而非 <a class="delete"></a> 本身。此时 event.target 是 <i></i>，它不包含 delete 类名，导致 classList.contains('delete') 判断失败，删除逻辑完全不会触发。
✅ 正确做法是使用 event.target.closest('.delete')：
- 它从
event.target开始向上遍历 DOM，自动查找最近的匹配祖先（含自身）； - 即使点击的是
<i></i>，也能精准捕获外层.delete元素； - 返回
null表示未找到，可安全判断。
修正后的完整逻辑如下：
document.addEventListener('click', function(event) {
if (event.target.id === 'add') {
count++;
addAward(count);
}
// ✅ 使用 closest() 精准定位被点击的 .delete 元素
const deleteBtn = event.target.closest('.delete');
if (deleteBtn) {
// ✅ 删除的是 .delete 按钮的父级 div（即 .col-lg-4）
deleteBtn.parentNode.remove();
}
});
同时，建议优化 addAward() 中的 HTML 模板，为删除按钮添加 data-index 属性便于后续扩展（如确认弹窗、数据清理等）：
function addAward(number) {
const html = `
<div class="col-lg-4 mb-3 position-relative">
<label for="image${number}" class="form-label">image ${number}</label>
<input type="file" class="form-control" id="image${number}" name="image${number}"><a class="delete text-danger cursor-pointer position-absolute end-0 top-0" data-index="${number}">
<i class="fa-solid fa-times"></i>
</a>
</div>`;
document.getElementById('showAward').insertAdjacentHTML('beforeend', html);
}
⚠️ 注意事项：
-
永远不要依赖
currentTarget在事件委托中定位触发元素 —— 它只表示监听器绑定的目标节点（此处为document）； -
closest()是现代浏览器标准 API（兼容性：Chrome 41+、Firefox 35+、Edge 12+、Safari 9.1+），如需支持旧版 IE，可用 polyfill 或手动遍历parentNode； - 删除前可增加二次确认（尤其涉及用户数据时）：
if (deleteBtn && confirm('确定删除此项？')) { deleteBtn.parentNode.remove(); }
掌握 target 与 closest() 的协同使用，是写出健壮、可维护原生事件处理逻辑的关键一步。
