JS开发待办清单应用 点击动态添加的li元素无法删除

• 事件绑定逻辑位置错误：删除li的点击事件写在添加按钮回调的外部，页面初始加载时就会执行这行代码，此时动态待办li还未创建，input变量指向无效，新增的li根本没绑定上删除监听
• 待办容器选择错误：代码里把新建的li直接插入到了存放输入框、+按钮的#newTask容器中，和HTML里预留的待办展示区（.added标签下的<ul>节点）不匹配
• 缺少空值校验：输入框无内容时点击+也会生成空白无效待办

推荐使用事件委托方案，不需要给每个新增li单独绑定事件，后续新增任意多待办都能正常响应点击：

function dark() { // 深色模式切换
  const element = document.body;
  element.classList.toggle("dark-mode");
}

const addToDoButton = document.getElementById('addToDo');
// 修正容器选择，指向专门放待办li的ul节点
const toDoContainer = document.querySelector('.added ul');
const inputField = document.getElementById('tasks');

addToDoButton.addEventListener('click', function() {
  const taskContent = inputField.value.trim();
  // 空内容直接拦截，不生成待办
  if (!taskContent) return;

  const newTask = document.createElement('li');
  newTask.classList.add('tasks');
  newTask.innerText = taskContent;
  toDoContainer.appendChild(newTask);
  // 添加完成清空输入框
  inputField.value = '';
})

// 给父级ul绑定统一点击监听，通过事件冒泡捕获li的点击动作
toDoContainer.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    // 要实现划线标记完成就替换下面这行，改成e.target.style.textDecoration = "line-through"
    e.target.remove();
  }
})

原有HTML代码不需要改动，替换JS后即可实现点击对应li直接删除任务的效果。

内容的提问来源于stack exchange，提问作者Alana Rèyes