点击“Add New Task”按钮后RemoveEventListener失效的问题求助

我完全懂你的困扰：你做了一个手风琴式的任务列表，初始的Task1、Task2点击后会触发hidingAndShowing函数隐藏其他任务内容，但新增任务后，旧任务的事件监听器还在沿用原来的节点列表，导致新任务打开后，点旧任务没法把它关掉。你尝试移除旧监听器但没生效，对吧？

为什么你的removeEventListener不起作用？ #

看你绑定事件的这段代码：

newNodeList.forEach(item => {
  item.addEventListener("click", function(e) {
    e.stopPropagation();
    hidingAndShowing(item,newNodeList);
  });
});

你绑定的是一个匿名函数，而不是直接绑定hidingAndShowing本身。removeEventListener要求必须传入和绑定阶段完全相同的函数引用才能生效，你后面调用item.removeEventListener("click", hidingAndShowing)时，这个hidingAndShowing和绑定的匿名函数不是同一个引用，所以移除操作根本找不到对应的监听器，自然就失效了。

解决方案一：用命名函数统一绑定/移除 #

我们可以把事件回调改成一个命名函数，这样绑定和移除时用的是同一个引用，就能正确移除了：

1. 先定义一个统一的点击处理函数：

// 统一的触发器点击处理函数
function handleTriggerClick(e) {
  e.stopPropagation();
  // 每次点击都获取最新的触发器列表
  const allTriggers = Array.from(document.querySelectorAll(".accordion-item-trigger"));
  hidingAndShowing(e.currentTarget, allTriggers);
}

2. 页面加载时，给初始触发器绑定这个函数：

// 初始绑定事件
const initialTriggers = document.querySelectorAll(".accordion-item-trigger");
initialTriggers.forEach(trigger => {
  trigger.addEventListener("click", handleTriggerClick);
});

3. 修改“Add New Task”的点击逻辑：

const addNewTask = document.querySelector('.new-task-js');
addNewTask.addEventListener('click', () => {
  const accordion = document.querySelector('.accordion');
  accordion.insertAdjacentHTML('beforeend', newTask);

  // 获取所有触发器，先移除旧的监听器
  const allTriggers = document.querySelectorAll(".accordion-item-trigger");
  allTriggers.forEach(trigger => {
    trigger.removeEventListener("click", handleTriggerClick);
  });

  // 重新给所有触发器绑定新的监听器
  allTriggers.forEach(trigger => {
    trigger.addEventListener("click", handleTriggerClick);
  });
});

这样每次新增任务后，都会先移除所有旧监听器，再重新绑定，确保所有触发器的逻辑都使用最新的节点列表。

解决方案二：事件委托（更推荐） #

其实完全不用每次新增任务都手动移除再绑定，用事件委托可以一劳永逸解决问题——把事件监听绑定在父元素.accordion上，利用事件冒泡机制处理所有子触发器的点击：

const accordion = document.querySelector('.accordion');

// 给父元素绑定一次事件即可
accordion.addEventListener('click', (e) => {
  // 判断点击的元素是不是触发器（包括触发器的子元素）
  const trigger = e.target.closest('.accordion-item-trigger');
  if (!trigger) return; // 不是触发器的话直接返回

  e.stopPropagation();
  const allTriggers = Array.from(document.querySelectorAll(".accordion-item-trigger"));
  hidingAndShowing(trigger, allTriggers);
});

这种方式下，不管新增多少个任务，触发器的点击事件都会冒泡到父元素.accordion，我们再判断点击的是哪个触发器，执行对应的逻辑。完全不需要处理移除和重新绑定的操作，代码更简洁高效。

总结 #

核心问题就是你之前绑定的是匿名函数，导致removeEventListener无法匹配到正确的监听器。使用命名函数或者事件委托都能解决问题，其中事件委托是更优的方案，它避免了频繁的事件绑定/移除操作，性能更好。

备注：内容来源于stack exchange，提问作者Piotr Deja