JS中removeEventListener失效原因：批量移除按钮点击事件失败

核心问题：绑定与移除的函数不是同一个引用 #

你写的removeItem是个高阶函数——调用它（比如removeItem(...)）会返回一个全新的匿名函数，而你给按钮添加监听时，绑定的正是这个返回的匿名函数。但你在移除监听时，传给removeEventListener的是removeItem本身，这两个不是同一个函数引用，浏览器找不到要移除的监听器，所以removeEventListener完全没效果。

修复方案：存储每个按钮对应的监听函数 #

你需要把每个按钮绑定的匿名函数存起来，后续移除时用这个存储的引用：

var current_items = document.getElementsByClassName('cart_post_wrap'),
    remove_buttons = document.getElementsByClassName('cart_remove_button');
// 新增数组存储每个按钮对应的监听函数
const listenerList = [];

function removeItem(object1, object2, object3, index) {
    return function () {
        // 保留你移除DOM的代码
        
        // 移除所有监听时，用存储的函数引用
        for (let i = 0; i < listenerList.length; i++) {
            remove_buttons[i]?.removeEventListener("click", listenerList[i]);
        }
    }
}

// 绑定监听时，把返回的函数存起来
for (let i = 0; i < current_items.length; i++) {
    const listener = removeItem(current_items[i], ids_list[i], types_list[i], i);
    listenerList.push(listener);
    remove_buttons[i].addEventListener("click", listener);
}

额外优化思路：用事件委托简化逻辑 #

如果不想维护监听函数数组，可以用事件委托，把监听绑定到父元素上，然后通过一个开关变量控制是否响应点击：

let isListening = true;
// 绑定到按钮的共同父节点（比如document或具体容器）
document.addEventListener("click", function(e) {
    if (!isListening) return;
    if (e.target.classList.contains('cart_remove_button')) {
        // 处理移除DOM的逻辑
        
        // 关闭监听开关
        isListening = false;
    }
});

这样不需要手动移除每个监听，直接通过变量控制是否生效，代码更简洁。

内容的提问来源于stack exchange，提问作者this_is_a_person