使用ES6移除父元素：尝试移除父div为何失效？

嘿，我来帮你排查这段代码失效的核心原因，顺便给你提个后续优化的小建议：

1. 函数声明顺序错误（最直接的失效原因） #

你现在的代码逻辑是先绑定点击事件，再定义事件处理函数，但这里用的是const声明的函数表达式——在JavaScript里，const/let声明的变量（包括函数）不会被提升，也就是说当浏览器执行到images.addEventListener('click', removeClickedImage);这一行时，removeClickedImage还没被定义，会直接抛出ReferenceError，导致事件根本没绑定成功，自然点击按钮毫无反应。

你可以打开浏览器控制台（F12）看看，肯定能看到这个报错信息。

2. 依赖parentNode的潜在风险（修复第一个问题后可能遇到的坑） #

假设你把顺序调对了，当前代码里target.parentNode.remove()是移除按钮的直接父元素，但如果未来你的HTML结构调整（比如给按钮套了个<span>容器），parentNode就不再是你想移除的.imagediv了，代码会直接失效。换成closest()方法会让代码更健壮。

修复后的完整代码 #

// 先定义工具函数和事件处理函数
const hasClass = (el, test) => el.classList.contains(test);
const removeClickedImage = ({ target }) => {
  if (hasClass(target, 'remove')) {
    // 向上查找最近的.image元素，比parentNode更可靠
    target.closest('.image').remove();
  }
};

// 再获取DOM元素并绑定事件
const images = document.querySelector('.gallery');
images.addEventListener('click', removeClickedImage);

额外小技巧 #

如果不想调整代码顺序，也可以把removeClickedImage改成函数声明（用function关键字），因为函数声明会被提升到作用域顶部，即使写在事件绑定后面也能正常生效：

var images = document.querySelector('.gallery');
images.addEventListener('click', removeClickedImage);

const hasClass = (el, test) => el.classList.contains(test);

// 函数声明会被提升，所以这里没问题
function removeClickedImage({ target }) {
  if (hasClass(target, 'remove')) {
    target.closest('.image').remove();
  }
}

内容的提问来源于stack exchange，提问作者john c. j.