这个坑我之前踩过好几次！你遇到的问题核心原因应该是一开始用了行的索引位置来绑定删除逻辑——当某一行被删掉后，剩下的行自动往前挪了一位，但按钮绑定的还是原来的旧索引，自然就会点错行。

给你两个最实用的解决方案，不管是静态表格还是动态生成的行都能用：

方案一：利用DOM层级直接定位当前行（最简单） #

不用管索引，点击按钮时直接找到它所在的表格行，然后删除。推荐用事件委托，不仅能避免错位，还能支持动态添加的行：

<!-- 你的任务表格 -->
<table id="taskList">
  <tr>
    <td>完成文档整理</td>
    <td><button class="delete-btn">删除</button></td>
  </tr>
  <tr>
    <td>提交周报</td>
    <td><button class="delete-btn">删除</button></td>
  </tr>
</table>

// 给表格绑定点击事件，委托到按钮上
document.getElementById('taskList').addEventListener('click', function(e) {
  // 判断点击的是删除按钮
  if (e.target.classList.contains('delete-btn')) {
    // 找到按钮所在的<tr>元素
    const targetRow = e.target.closest('tr');
    if (targetRow) {
      targetRow.remove();
      
      // 如果需要同步删除引用表格的对应行，这里可以根据行的内容/标识去匹配删除
      // 比如如果引用表格的行和原行内容一致，可以用targetRow.textContent去查找
    }
  }
});

这个方法的好处是完全不依赖行的位置，不管删多少行，按钮永远只删除自己所在的那一行，绝对不会错位。

方案二：用唯一标识同步删除原表格和引用表格 #

如果需要同时删除原表格和引用表格的对应行，给每行加一个唯一的data-*属性是最稳妥的方式：

<!-- 原任务表格 -->
<table id="mainTable">
  <tr data-task-id="t1001">
    <td>完成文档整理</td>
    <td><button class="delete-btn" data-task-id="t1001">删除</button></td>
  </tr>
</table>

<!-- 引用该任务的表格 -->
<table id="refTable">
  <tr data-task-id="t1001">
    <td>文档整理（待办引用）</td>
  </tr>
</table>

document.getElementById('mainTable').addEventListener('click', function(e) {
  if (e.target.classList.contains('delete-btn')) {
    const taskId = e.target.dataset.taskId;
    
    // 删除原表格的对应行
    document.querySelector(`#mainTable tr[data-task-id="${taskId}"]`).remove();
    // 删除引用表格的对应行
    document.querySelector(`#refTable tr[data-task-id="${taskId}"]`).remove();
  }
});

通过data-task-id这个唯一标识，不管行的位置怎么变，都能精准找到要删除的行，完美解决错位+同步删除的问题。

避坑提醒 #

• 别再用for (var i = 0; ...)这种循环给按钮绑定事件了！var的变量提升会导致所有按钮都绑定最后一个索引，就算用let，删除行后索引还是会混乱，不如直接操作DOM元素可靠。
• 优先用事件委托，比给每个按钮单独绑定事件更高效，尤其是当表格行是动态添加的时候，新行的按钮不用重新绑定事件就能生效。

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