原生JavaScript开发任务列表时删除按钮功能失效如何解决？

原代码核心问题 #

• 删除事件绑定逻辑错误：循环遍历删除按钮时未取下标对应元素，回调参数e未定义，remove()方法无需传参
• 事件重复绑定：每次按键触发keypress时都会给所有已存在的删除按钮重复绑定点击事件，导致内存浪费和逻辑异常
• 事件冒泡冲突：点击删除按钮后事件冒泡到外层li，会误触发完成状态切换逻辑
• 完成状态切换逻辑漏洞：仅点击li元素本身才会触发切换，点击内部文本、按钮时均不生效

最优实现方案（事件委托，无需ID，新增任务自动适配） #

直接将所有交互逻辑绑定在父级ul.todo__list上，不需要给每个新增的元素单独绑定事件，代码更简洁，性能更好。HTML代码无需调整，可直接沿用原有实现。

修复后完整JS代码 #

const todoInputEl = document.querySelector('.todo__input');
const todoListEl = document.querySelector('.todo__list');

// 新增任务逻辑
function addListItem() {
  todoInputEl.addEventListener('keypress', function(event) {
    if (event.keyCode === 13 && todoInputEl.value.trim()) {
      let newListItem = createListItem(todoInputEl.value.trim());
      todoListEl.insertBefore(newListItem, todoListEl.childNodes[0]);
      todoInputEl.value = '';
    }
  })
};

// 创建任务项DOM
function createListItem(text) {
  const newListElement = document.createElement('li');
  newListElement.innerHTML = `
        <span class="task-text">${text}</span>
        <button class="delete-task">Delete<i class="fas fa-trash"></i></button>
        `;
  newListElement.classList.add("todo__item");
  return newListElement;
};

// 统一处理点击逻辑（切换完成+删除）
function handleListClick() {
  todoListEl.addEventListener('click', function(event) {
    const targetEl = event.target;
    // 匹配删除按钮（包括内部的垃圾桶图标）
    const deleteBtn = targetEl.closest('.delete-task');
    if (deleteBtn) {
      // 找到对应的li元素直接删除
      deleteBtn.closest('.todo__item').remove();
      // 阻止冒泡，避免触发完成状态切换
      event.stopPropagation();
      return;
    }
    // 匹配任务项（点击li本身或者内部文本都生效）
    const todoItem = targetEl.closest('.todo__item');
    if (todoItem) {
      todoItem.classList.toggle('done');
    }
  })
};

addListItem();
handleListClick();

改动说明 #

1. 移除了原来循环绑定删除事件的冗余代码，所有交互都通过父级事件委托实现
2. 用closest()方法匹配元素，不管点击的是按钮本身还是内部的图标，都能准确找到对应的删除按钮和任务项
3. 删除操作后调用stopPropagation()阻止事件冒泡，避免触发完成状态切换
4. 新增输入内容非空判断，避免添加空任务
5. 切换完成状态的逻辑适配点击内部文本的场景，交互更符合预期

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