JavaScript待办列表异常：仅可删除最后一项，复选框功能失效

问题根源 #

你遇到的「只能删除最后一个任务、只有最后一个复选框能触发删除线」的问题，核心原因是使用tasks.innerHTML +=拼接新任务时，会重新渲染整个<ul class="tasks">容器内的所有元素。原来已经绑定了点击事件的旧任务DOM节点会被销毁重建，导致它们的事件监听全部失效——只有最后一个刚添加的任务因为是新创建的、事件监听还在，所以能正常工作。

修复方案 #

把innerHTML +=替换成insertAdjacentHTML，这个方法不会重新渲染已有元素，只会在指定位置插入新的HTML内容，原有元素的事件监听会被完整保留：

修改JavaScript中添加任务的代码段：

// 替换原来的 tasks.innerHTML += ...
tasks.insertAdjacentHTML('beforeend', `
    <li id="${taskCount}-section">
        <input type="checkbox"  id="${taskCount}chk">
        <label class="label-for-${taskCount}" for="${taskCount}chk">${newTaskInput.value}</label>
        <input type="button" id="${taskCount}btn" value="x">
    </li>`);

修改后，所有旧任务的事件监听都能正常生效，删除和复选框功能就都能正常工作了。

额外优化建议 #

• 用事件委托替代逐个绑定事件
  不用给每个复选框和删除按钮单独绑定事件，直接在父元素<ul class="tasks">上绑定一次事件，通过事件冒泡处理子元素点击，代码更简洁高效，也避免了动态添加元素时的事件绑定问题：

  // 移除原来的addListenerToCheckbox和addListenerToButton函数，替换为以下代码
  tasks.addEventListener('click', (e) => {
      // 处理复选框点击
      if (e.target.type === 'checkbox') {
          const label = document.querySelector(`label[for="${e.target.id}"]`);
          label.style.textDecoration = e.target.checked ? 'line-through' : 'none';
      }
      // 处理删除按钮点击
      if (e.target.type === 'button') {
          e.target.closest('li').remove();
      }
  });
  

  这样添加新任务时，不需要再调用绑定事件的函数，直接插入HTML即可。

• 用CSS类控制样式，替代直接操作style
  先定义一个CSS类：

  .completed {
      text-decoration: line-through;
      color: #999;
  }
  

  然后在处理复选框点击时，给label添加/移除这个类：

  label.classList.toggle('completed', e.target.checked);
  

  样式和逻辑分离，后续维护更方便。

• 简化ID生成逻辑
  不需要用taskCount生成ID，可以用Date.now()生成唯一时间戳，或者直接利用元素的dataset属性存储关联信息，避免ID冲突的可能。

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