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

How to delete a range of rows using javascript (Vanilla or JQuery)

I need to delete table rows in range from row with an ID "#deleteFirstRow" to row with an ID "#deleteLastRow". But all the other rows out of these two IDs should remain.
NB: I tried to search posted answers but did not get any working solution. Please help!

This is my table:


<table>

    <tr>doNotDeleteRow</tr>
    <tr>doNotDeleteRow</tr>
    <tr>doNotDeleteRow</tr>

    <tr id="deleteFirstRow">deleteRow</tr>
    <tr>deleteRow</tr>
    <tr>deleteRow</tr>
    <tr>deleteRow</tr>
    <tr id="deleteLastRow">deleteRow</tr>

    <tr>doNotDeleteRow</tr>
    <tr>doNotDeleteRow</tr>
    <tr>doNotDeleteRow</tr>

</table>

I tried this code:

$("table tr:not(#deleteFirstRow, #deleteLastRow)").remove();

But this code removes all rows except the ones with IDs: "#deleteFirstRow" and "#deleteLastRow".

What I want is to remove only rows between "#deleteFirstRow" and "#deleteLastRow" and also remove "#deleteFirstRow" and "#deleteLastRow".

So the expected result should be like below:


<table>

    <tr>doNotDeleteRow</tr>
    <tr>doNotDeleteRow</tr>
    <tr>doNotDeleteRow</tr>

    <tr>doNotDeleteRow</tr>
    <tr>doNotDeleteRow</tr>
    <tr>doNotDeleteRow</tr>

</table>
Tags:

2

Answers


  1. 0

    You can slice the collection of all rows based on the two boundary elements, then call remove.

    const rows = $('table tr');
rows.slice(rows.index($('#deleteFirstRow')), 
            rows.index($('#deleteLastRow')) + 1).remove();
    tr {
  display: block;
  border: 1px solid;
  padding: 5px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr class="doNotDeleteRow"><td>1</td></tr>
    <tr class="doNotDeleteRow"><td>2</td></tr>
    <tr class="doNotDeleteRow"><td>3</td></tr>
    <tr id="deleteFirstRow"><td>4</td></tr>
    <tr class="deleteRow"><td>5</td></tr>
    <tr class="deleteRow"><td>6</td></tr>
    <tr class="deleteRow"><td>7</td></tr>
    <tr id="deleteLastRow"><td>8</td></tr>
    <tr class="doNotDeleteRow"><td>9</td></tr>
    <tr class="doNotDeleteRow"><td>10</td></tr>
    <tr class="doNotDeleteRow"><td>11</td></tr>
</table>
    Login or Signup to reply.
  2. 0

    It can also be done with vanilla js

    Here we loop through the rows till we hit a row with the a row with the id ‘deleteFirstRow’ then we set deleting to true and then we remove() every row until we hit the row id ‘deleteLastRow’ and we remove that row too.

    const rows = document.querySelectorAll('table tr');
let deleting = false;
for (row of rows) {
  if (row.id == 'deleteFirstRow') {
    deleting = true;
  }
  if (row.id == 'deleteLastRow') {
    deleting = false;
    row.remove();
  }
  if (deleting) {
    row.remove();
  }
}
      <table>
      <tr><td>doNotDeleteRow</td></tr>
      <tr><td>doNotDeleteRow</td></tr>
      <tr><td>doNotDeleteRow</td></tr>

      <tr id="deleteFirstRow"><td>deleteRow</td></tr>
      <tr><td>deleteRow</td></tr>
      <tr><td>deleteRow</td></tr>
      <tr><td>deleteRow</td></tr>
      <tr id="deleteLastRow"><td>deleteRow</td></tr>

      <tr><td>doNotDeleteRow</td></tr>
      <tr><td>doNotDeleteRow</td></tr>
      <tr><td>doNotDeleteRow</td></tr>

  </table>

    Edit: fix typo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search