如何为同ID元素统一添加eventListener？Todo列表事件绑定问题

核心问题 #

1. 重复使用ID：HTML规范中ID必须唯一，你在多个任务项和关闭按钮上重复使用task、close ID，导致getElementById只会获取页面中第一个匹配的元素，后续元素的事件完全没绑定到正确对象上。
2. 静态事件绑定失效：初始代码只给页面加载时的第一个任务和关闭按钮绑定了事件，动态新增的元素没有绑定事件逻辑。
3. 操作固定元素：删除和状态切换时，你操作的是固定的WRAPPER和TASK变量，不是当前点击的元素对应的容器或任务项。

修正后的代码 #

HTML部分（修正重复ID）

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="flex justify-center ">
  <h1 class="text-3xl">Todos</h1>
</div>
<form id="form" class="flex justify-center items-center">
  <input id="text" type="text" class="w-80 bg-white rounded-md py-3" placeholder="Essen gehen...">
  <i type="submit" class="fa-solid fa-check hover:cursor-pointer"></i>
</form>
<br>
<br>
<div class="newWrapper">
  <p class="task w-96 bg-white text-center py-3">get food</p>
  <i class="close fa fa-x fa-2x h-12 p-2 cursor-pointer"></i>
</div>
<div class="newWrapper">
  <p class="task w-96 bg-white text-center py-3">get food</p>
  <i class="close fa fa-x fa-2x h-12 p-2 cursor-pointer"></i>
</div>

JavaScript部分（使用事件委托+修正逻辑）

const FORM = document.getElementById("form");
const input = document.getElementById("text");

// 表单提交逻辑：创建新任务
FORM.addEventListener("submit", (evt) => {
  evt.preventDefault();
  if (!input.value.trim()) return; // 空输入不创建任务

  const div = document.createElement("div");
  div.classList.add("newWrapper");
  
  const p = document.createElement("p");
  p.classList.add("task", "w-96", "bg-white", "text-center", "py-3");
  p.textContent = input.value;
  
  const i = document.createElement("i");
  i.classList.add("close", "fa", "fa-x", "fa-2x", "h-12", "p-2", "cursor-pointer");

  div.appendChild(p);
  div.appendChild(i);
  document.body.appendChild(div);
  input.value = ""; // 清空输入框
});

// 事件委托：处理所有关闭按钮点击
document.addEventListener("click", (e) => {
  if (e.target.classList.contains("close")) {
    // 找到当前关闭按钮所在的任务容器并删除
    const taskWrapper = e.target.closest(".newWrapper");
    if (taskWrapper) taskWrapper.remove();
  }
});

// 事件委托：处理所有任务项的状态切换
document.addEventListener("click", (e) => {
  if (e.target.classList.contains("task")) {
    const task = e.target;
    // 切换checked类
    task.classList.toggle("checked");
    // 同步调整容器样式
    const taskWrapper = task.closest(".newWrapper");
    taskWrapper.classList.toggle("flex", "justify-center");
  }
});

// 可选：自定义checked类样式（如果需要）
document.head.insertAdjacentHTML("beforeend", `
  <style>
    .checked {
      text-decoration: line-through;
      opacity: 0.7;
      /* 你需要的其他样式 */
    }
  </style>
`);

关键改进点 #

• 用Class替代重复ID：所有任务项用task类，关闭按钮用close类，避免ID冲突。
• 事件委托：把事件绑定到document上，通过判断点击目标的class来处理逻辑，不管是初始还是动态新增的元素都能触发事件，不用每次创建元素都绑定事件。
• 操作当前元素：用closest(".newWrapper")找到当前点击元素所在的任务容器，确保删除和状态切换的是正确的任务项。
• 增加空输入判断：避免创建空任务。

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