使用jQuery删除表格行问题：新增行删除时误删全部

我有一个可动态添加和删除行的表格，现有行的删除功能正常，但新增行使用相同功能时会删除所有行。尝试用find()查找tr但没效果。

问题原因 #

你当前的代码每次点击添加行时，都会给所有.remove button元素重新绑定点击事件，导致新增行的按钮被绑定了多次点击逻辑。当点击新增行的删除按钮时，会触发多次removeRow函数，最终所有行都被删除了。另外，你用append传入多个字符串参数的写法会破坏表格DOM结构，也是潜在问题。

解决方案 #

使用事件委托是最简洁可靠的方式，无需每次新增行都重复绑定事件；同时修复DOM插入的结构问题，优化行查找逻辑：

修正后的JavaScript代码 #

// 事件委托：绑定在表格父元素上，监听所有删除按钮的点击
$("#table").on('click', '.remove button', function() {
  removeRow($(this));
});

$("#addRow").click(function() {
  // 将整行HTML合并为一个字符串插入，确保DOM结构正确
  $("#table").append(`
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td class="remove"><button>Remove</button></td>
    </tr>
  `);
});

function removeRow(row) {
  // 用closest()直接定位到最近的tr元素，比parent().parent()更健壮
  row.closest('tr').remove();
}

完整代码示例 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
</table>
<p><button id="addRow">Add a new row</button></p>

CSS

#table {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#table td {
  width: 20%;
  border: solid 1px black;
}

#table .remove {
  border: none;
}

修改说明 #

• 事件委托：把点击事件绑定在表格#table上，通过第二个参数指定触发事件的子元素，不管是初始行还是新增行，点击按钮都会触发事件，且不会重复绑定。
• 修复DOM插入：之前的append传入多个字符串会导致HTML节点拆分，现在合并为完整的一行字符串，保证表格结构正确。
• 优化行查找：closest('tr')可以直接找到当前按钮所在的行，比多次调用parent()更直观，且不受DOM层级变化影响。

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