JavaScript待办列表删除功能异常：点击无效且e未定义

问题根源 #

1. "e is undefined"错误：
   • 动态创建按钮时，你用newButton.setAttribute("onclick", "Delete(e)")，这里的e在全局作用域中不存在，内联事件里的事件对象无法通过这种方式传递。
   • 静态HTML中的删除按钮调用Delete()时未传参，直接导致e未定义。
2. 删除功能不稳定：
   • 依赖多层parentNode遍历DOM元素，一旦DOM结构调整（比如新增/移除层级），代码直接失效，容错性极差。

优化方案 #

1. 放弃内联onclick，改用addEventListener绑定事件，直接获取事件对象，避免全局变量问题。
2. 用Element.closest()替代多层parentNode，直接定位到目标任务容器，DOM结构微调也不影响功能。
3. 统一静态和动态元素的事件处理逻辑，确保所有删除按钮行为一致。

修改后的JavaScript代码

let input_text = document.getElementById("input_text");
let Addbutton = document.getElementById("Addbutton");
let workList = document.getElementById("workList");
let xicon = '<i class="fa-regular fa-circle-xmark"></i>';
let checkicon = '<i class="fa-regular fa-circle-check"></i>';

Addbutton.onclick = function () {
  if (input_text.value === "") {
    alert("Please type something");
  } else {
    let newDiv = document.createElement("div");
    let newLabel = document.createElement("label");
    workList.appendChild(newDiv);
    newDiv.classList.add("workDiv");
    newDiv.appendChild(newLabel);
    newLabel.innerText = input_text.value;
    
    let newDiv2 = document.createElement("div");
    newDiv.appendChild(newDiv2);
    newDiv2.classList.add("buttonDiv");
    
    // 创建删除按钮并绑定事件
    let newButton = document.createElement("button");
    newDiv2.appendChild(newButton);
    newButton.innerHTML = xicon;
    newButton.addEventListener('click', handleDelete);
    
    let newButton2 = document.createElement("button");
    newDiv2.appendChild(newButton2);
    newButton2.innerHTML = checkicon;

    input_text.value = "";
  }
};

// 统一删除处理函数
function handleDelete(e) {
  // 向上查找最近的任务容器
  const workDiv = e.target.closest('.workDiv');
  if (workDiv) {
    workDiv.remove();
  }
}

// 页面加载后为静态删除按钮绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const staticDeleteBtns = document.querySelectorAll('.buttonDiv button:first-child');
  staticDeleteBtns.forEach(btn => btn.addEventListener('click', handleDelete));
});

修改后的HTML代码

<section
  id="workList"
  class="mt-4 pl-2 h-fit w-11/12 flex flex-col gap-2"
>
  <div class="workDiv">
    <label>todlapp1</label>
    <div class="buttonDiv">
      <button>
        <i class="fa-regular fa-circle-xmark" aria-hidden="true"></i>
      </button>
      <button>
        <i class="fa-regular fa-circle-check" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</section>

关键说明 #

• handleDelete函数中，e.target.closest('.workDiv')会自动向上查找最近的带workDiv类的父元素，不管点击的是按钮还是内部的图标，都能精准定位到要删除的任务容器。
• 使用workDiv.remove()替代复杂的parentNode遍历，语法简洁且兼容性好（现代浏览器均支持）。
• 页面加载完成后为静态按钮绑定事件，确保静态添加的任务也能正常删除。

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