使用JS开发待办应用：提交后删除功能失效求助

问题根源 #

你的删除按钮是动态生成的（随新任务一同添加到DOM中），但页面加载时执行的事件绑定代码仅对当时已存在的删除按钮生效，新添加的按钮并未绑定点击事件，导致点击后无响应。

修复步骤 #

将原删除事件绑定逻辑改为事件委托，把事件绑定到静态存在的父容器上，借助事件冒泡处理动态元素的点击操作：

1. 移除原有的删除按钮循环绑定代码：

// 删除这段代码
const deleteBtn = document.getElementsByClassName('delete-btn');
for(let i=0; i<deleteBtn.length; i++){
  deleteBtn[i].addEventListener('click', deleteTodo);
}

2. 替换为事件委托代码：

// 给父容器绑定点击事件
document.querySelector('.todo-container').addEventListener('click', function(e) {
  // 判断点击目标是否为删除按钮
  if(e.target.classList.contains('delete-btn')) {
    // 将当前按钮的父元素（任务项）传入删除函数
    deleteTodo(e.target.parentElement);
  }
});

3. 确保deleteTodo函数可正确移除任务项，示例逻辑：

function deleteTodo(todoItem) {
  todoItem.remove();
}

原理说明 #

事件委托利用DOM的事件冒泡机制，父容器会捕获所有子元素的点击事件，通过判断点击目标的类名，可精准触发对应操作，无论子元素是页面初始就存在还是后续动态生成的，都能正常生效。

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