点击HTML表格同行按钮无法获取任务编号及行删除逻辑异常

你的代码存在两处核心逻辑错误，对应修复方式如下：

• 逻辑执行时机错误：删除行、读取任务ID的逻辑写在了点击事件回调的外部，函数执行时会立刻运行这部分代码，此时既没有触发点击事件、也拿不到有效的event对象，不仅读不到正确的任务ID（控制台只会一直输出初始值0），删除行的逻辑也会直接抛出引用错误。所有和点击操作相关的逻辑，都必须放在点击事件的回调函数内部执行。
• DOM节点查找容错性差：直接用parentNode逐级向上查找的写法稳定性很低，如果删除按钮内部嵌套了图标、文本标签等子元素，点击时event.target会指向实际触发点击的子元素而非按钮本身，会导致父节点查找完全错位。可以用closest()方法直接向上匹配最近的<tr>行元素，不需要关心按钮和行之间隔了多少层嵌套，避免层级错位问题。

修正后的代码 #

function deleteTask(){
  const delTask = document.querySelectorAll(".del-btn");
  for (let i = 0; i < delTask.length; i++) {
    delTask[i].addEventListener("click", function(event) {
      // 向上匹配当前按钮所在的表格行
      const currentTr = event.target.closest("tr");
      // 读取任务编号，td的索引从0开始计数，根据你表格里任务编号的实际列位置调整索引值即可
      const deleteTaskId = currentTr.querySelectorAll("td")[1].innerText.trim();
      console.log(deleteTaskId);
      
      // 移除当前行
      currentTr.remove();
      
      // 后续可在这里追加后端接口调用逻辑，删除对应ID的任务数据
    });
  }
}

优化提示：如果你的表格支持动态新增任务行，不需要每次新增行之后都重新调用deleteTask绑定事件，可以直接用事件委托做一次性绑定，性能更好、维护更简单，示例代码如下：

// 替换成你实际的表格父元素选择器，只需要页面初始化时调用一次即可
document.querySelector("table").addEventListener("click", function(event) {
  if (event.target.classList.contains("del-btn")) {
    const currentTr = event.target.closest("tr");
    const deleteTaskId = currentTr.querySelectorAll("td")[1].innerText.trim();
    console.log(deleteTaskId);
    currentTr.remove();
    // 追加后端删除逻辑
  }
})

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