Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Remove duplicate row from two different tables

is there a way to remove duplicated rows that reside in two different tables by clicking one remove button. When i click on the remove button it only removes from the first table need to remove the same row in a second table as well

$("body").on("click", "#remove", function() {
  $(this).closest("tr").remove();
});
<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" id="remove" 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" id="remove" 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Sorry i modified it a bit from the original, this should work below but i like yours better

        <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" id="remove1" 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" id="remove" 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><input type="button" id="remove" class="btn btn-link remove" style="font-size: 11px; color:red;" value="- Remove" name="remove1"/></td>
        </tr>
        <tr>
            <td>D</td>
            <td>E</td>
            <td>F</td>
            <td><input type="button" id="remove" class="btn btn-link remove" style="font-size: 11px; color:red;" value="- Remove" name="remove2"/></td>
        </tr>
    </tbody>
</table>

    </body>


<script>

    $("body").on("click", "#remove1", function () {
        $(this).closest("tr").remove();
        $("[name='remove1']").closest("tr").remove();
    });

</script>

  2. 0

    Get the index of the current row, then remove that row index in all the tables.

    $("body").on("click", "#remove", function() {
  let index = $(this).closest("tr").index();
  $(`.table tbody tr:nth-child(${index+1})`).remove();
});
    <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" id="remove" 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" id="remove" 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search