JavaScript列表元素点击事件问题：待办项样式切换与删除异常

你的核心问题是全局共享的clickCount变量——所有待办项共用同一个计数器，导致点击不同项时计数器会累计。比如：

1. 点击A项，clickCount变为1，给A加删除线
2. 再点击B项，clickCount变为2，直接触发删除B项，完全不符合需求

你需要让每个待办项拥有独立的状态，而不是依赖全局计数器。

用CSS类标记完成状态，点击时通过判断当前项是否有该类来执行不同操作：

• 没有类：添加类（显示删除线）
• 已有类：移除该项

这样每个待办项的状态完全独立，不会互相干扰。

修复后的代码 #

const todoInput = document.getElementById("todoText");
const submitTodo = document.getElementById("submitTodo");
submitTodo.addEventListener("click", addTodo);
const todosList = document.getElementById("todos_list");

function addTodo() {
  if (todoInput.value === "") {
    alert("You must write Something!!");
  } else {
    let li = document.createElement("li");
    li.textContent = todoInput.value; // 用textContent更安全，避免XSS风险
    todosList.appendChild(li);
    todoInput.value = "";
  }
}

document.addEventListener("DOMContentLoaded", function () {
  todosList.addEventListener("click", function (e) {
    const clickedTodo = e.target;
    // 确保点击的是li元素
    if (clickedTodo.tagName !== "LI") return;

    // 判断是否已标记完成
    if (clickedTodo.classList.contains("completed")) {
      clickedTodo.remove();
    } else {
      clickedTodo.classList.add("completed");
    }
  });
});

配套CSS（需添加到HTML中） #

.completed {
  text-decoration: line-through;
  color: #999; /* 可选：变灰增强视觉区分 */
}

方案优势 #

1. 每个li的completed类是自身独立状态，不会和其他项冲突
2. 事件委托机制依然有效，能处理后续动态添加的待办项
3. 用textContent替代innerHTML，避免用户输入恶意HTML的风险

内容的提问来源于stack exchange，提问作者Kutluhan K.