Todo List删除任务功能实现：解决addEventListener报错及本地存储移除问题

先解决addEventListener"不是函数"的错误 #

这个报错大概率是你获取按钮的方式不对：

• 如果用document.getElementsByClassName('cancel-task')，返回的是HTMLCollection类数组对象，不是单个DOM元素，直接调用addEventListener肯定报错。得遍历每个按钮逐个绑定事件：

const cancelButtons = document.getElementsByClassName('cancel-task');
for (let btn of cancelButtons) {
  btn.addEventListener('click', handleCancelTask);
}

• 另一种更稳妥的方式是用事件委托，把点击事件绑定到任务列表的父容器上，不用管按钮什么时候渲染出来，避免元素还没加载就绑定事件的问题：

document.querySelector('.task-list-container').addEventListener('click', function(e) {
  if (e.target.classList.contains('cancel-task')) {
    handleCancelTask(e.target);
  }
});

利用任务id实现移除任务项 #

给每个.cancel-task按钮绑定对应任务的id，推荐用data-id属性（语义化更好）：

1. 渲染任务时，给按钮和任务项都关联任务id：

<!-- 示例：渲染单个任务项 -->
<div class="task-item" data-task-id="123">
  <span>买菜</span>
  <button class="cancel-task" data-id="123">取消</button>
</div>

2. 在点击事件处理函数中，拿到这个id，找到对应的任务项并移除：

function handleCancelTask(btn) {
  const taskId = btn.dataset.id;
  // 移除DOM中的任务项
  const taskItem = document.querySelector(`.task-item[data-task-id="${taskId}"]`);
  if (taskItem) {
    taskItem.remove();
  }
  // 后续处理localStorage移除逻辑
}

从localStorage中移除对应任务 #

localStorage里一般存的是JSON格式的任务数组，步骤如下：

function handleCancelTask(btn) {
  const taskId = btn.dataset.id;
  // 1. 获取localStorage中的任务数组，没有则返回空数组
  let tasks = JSON.parse(localStorage.getItem('todoTasks')) || [];
  // 2. 过滤掉id匹配的任务（注意id类型要一致，比如都是字符串或数字）
  tasks = tasks.filter(task => task.id !== taskId);
  // 3. 把过滤后的新数组存回localStorage
  localStorage.setItem('todoTasks', JSON.stringify(tasks));
}

注意：如果你的任务id是数字类型，记得把taskId转成数字（Number(taskId)），保证过滤时类型匹配。

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