如何点击单个删除按钮移除两个不同表格中的重复行

要实现点击删除按钮同时移除两个表格中的重复行，需要修改两部分内容：修正HTML中的重复ID问题，以及扩展JavaScript逻辑来匹配并删除第二个表格中的对应行。

步骤说明 #

• 修正重复ID: HTML中ID必须唯一，所以将所有删除按钮的id="remove"改为class="remove"。
• 提取行标识: 当点击删除按钮时，获取当前行的关键内容（比如前三个单元格的文本）作为匹配依据。
• 删除对应行: 先删除当前表格中的行，再根据提取的标识找到第二个表格中的相同行并删除。

完整代码 #

HTML（修正重复ID） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<body>
  <table id="tblUpdate1" cellpadding="0" cellspacing="0" class="table" name="tblUpdate1">
    <tbody class="tbodyUpdate" id="tbodyUpdate1" name="tbodyUpdate1">
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td><input type="button" class="btn btn-link remove" style="font-size: 11px; color:red;" value="- Remove" /></td>
      </tr>
      <tr>
        <td>D</td>
        <td>E</td>
        <td>F</td>
        <td><input type="button" class="btn btn-link remove" style="font-size: 11px; color:red;" value="- Remove" /></td>
      </tr>
    </tbody>
  </table>

  <table id="tblUpdate" cellpadding="0" cellspacing="0" class="table" name="tblUpdate">
    <tbody class="tbodyUpdate" id="tbodyUpdate" name="tbodyUpdate">
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td></td>
      </tr>
      <tr>
        <td>D</td>
        <td>E</td>
        <td>F</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>

JavaScript（扩展删除逻辑） #

$("body").on("click", ".remove", function() {
  // 获取当前点击按钮所在的行
  const $sourceRow = $(this).closest("tr");
  
  // 提取当前行前三个单元格的文本，用竖线拼接作为匹配标识
  const rowIdentifier = $sourceRow.find("td:not(:last)").map(function() {
    return $(this).text().trim();
  }).get().join("|");
  
  // 删除第一个表格中的当前行
  $sourceRow.remove();
  
  // 在第二个表格中查找匹配的行并删除
  $("#tblUpdate tbody tr").each(function() {
    const currentRowIdentifier = $(this).find("td").map(function() {
      return $(this).text().trim();
    }).get().join("|");
    
    if (currentRowIdentifier === rowIdentifier) {
      $(this).remove();
      return false; // 找到后退出循环，提升效率
    }
  });
});

代码解释 #

• 重复ID修正: 使用class="remove"替代重复的id="remove"，确保HTML符合规范，同时让jQuery能正确绑定所有删除按钮的点击事件。
• 行标识生成: 通过map()方法获取行中关键单元格的文本，拼接成唯一字符串，避免因单个单元格内容重复导致误删。
• 跨表格匹配: 遍历第二个表格的所有行，对比行标识，找到匹配项后立即删除并退出循环，保证操作高效。

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