Todo列表双按钮功能异常求助：完成与删除按钮无法同时生效

你的核心问题是把点击事件绑定到了<li>元素上，而非对应的按钮，且第二个removeChild()调用缺少参数，导致功能失效。以下是具体修正方案：

1. 给完成按钮单独绑定点击事件 #

将完成逻辑绑定到completedBtn，同时支持切换完成/未完成状态：

completedBtn.addEventListener("click", function() {
  // 切换删除线样式，点击一次添加，再点击取消
  newTodos.style.textDecoration = newTodos.style.textDecoration === "line-through" ? "none" : "line-through";
});

2. 给删除按钮单独绑定点击事件 #

删除逻辑绑定到deleteBtn，直接删除整个待办条目（无需removeChild，因为我们要移除的是<li>本身）：

deleteBtn.addEventListener("click", function() {
  newTodos.remove(); // 直接删除当前待办条目
});

3. 移除无效的<li>绑定事件 #

删掉原来绑定在newTodos上的两段无效代码：

// 删掉这两段
newTodos.addEventListener("click", function() {
  newTodos.style.textDecoration = "line-through"
})

newTodos.addEventListener("click", function() {
  newTodos.removeChild()
})

完整修正后的代码 #

todoForm.addEventListener("submit", function(event) {
  event.preventDefault();

  let newTodos = document.createElement("li")
  newTodos.innerText = document.querySelector("#add-el").value
  newTodos.classList.add("item")

  todoUl.appendChild(newTodos);

  let completedBtn = document.createElement("button");
  completedBtn.innerText = "✔️"
  completedBtn.classList.add("completed-Btn");
  completedBtn.type = "button"
  newTodos.appendChild(completedBtn)

  let deleteBtn = document.createElement("button");
  deleteBtn.innerText = "🗑️"
  deleteBtn.classList.add("delete-Btn");
  deleteBtn.type = "button"
  newTodos.appendChild(deleteBtn)

  // 完成按钮逻辑：切换删除线状态
  completedBtn.addEventListener("click", function() {
    newTodos.style.textDecoration = newTodos.style.textDecoration === "line-through" ? "none" : "line-through";
  })

  // 删除按钮逻辑：移除整个待办条目
  deleteBtn.addEventListener("click", function() {
    newTodos.remove();
  })

  todoForm.reset()
})

额外优化建议 #

• 用CSS类控制完成状态更灵活：定义.completed { text-decoration: line-through; }，然后用newTodos.classList.toggle("completed")替换style操作
• 如果按钮点击事件冒泡影响其他元素，可在按钮事件中添加event.stopPropagation()阻止事件向上传递

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