Delete All Rows in Table except the header row

user_211082 0
Viewed 885

Using Javascript (with JQuery), I would like to delete all rows in a table except the header row.

This seems like a simple thing because I see quite a few posts on StackOverFlow about this and a lot of solutions provided and accepted. But, none of them seem to work for me. Please refer to my code below:

function delTable() {
  console.log("Delete all rows, but the header");

  // Option-A
  // $('#TableA tbody tr').remove();

  // Option-B
  // Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
  // $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();

  // Option-C
  $('#TableA tbody').empty();

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

<body onLoad="delTable();">
  <table id="TableA">
    <th>
      <tr>
        <td>Col A</td>
        <td>Col B</td>
      </tr>
    </th>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>

</body>

</html>

Does any one know what I am doing wrong? Thanks.

-Karthik

jquery javascript
4 Answers

You need to replace th with thead and use $('#TableA tbody').find("tr") as follows:

function delTable() {
  console.log("Delete all rows, but the header");
  $('#TableA tbody').find("tr").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body onLoad="delTable();">
  <table id="TableA">
    <thead>
      <tr>
        <td>Col A</td>
        <td>Col B</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>

</body>

</html>

user_74863130

Just update your th to thead and you good to go, see below:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>

  
</head>
<body onLoad="delTable()">
  <table id="TableA">
    <thead>
      <tr>
        <td>Col A</td>
        <td>Col B</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

JS:

function delTable() {
  console.log("Delete all rows, but the header");

  // Option-A
  // $('#TableA tbody tr').remove();

  // Option-B
  // Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
  // $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();

  // Option-C
  $('#TableA tbody').empty();

}

Working fiddle: https://jsfiddle.net/pvfkxdby/1/

user_26338710

This worked for me. You set apart your header with <th> instead of <thead> and then you had <td> in your header instead of <th>.

$(document).ready(() => {
  $("#delete").click(() => {
    $("#TableA tbody tr").remove()
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="TableA">
    <thead>
      <tr>
        <th>Col A</th>
        <th>Col B</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
 </table>
 <button id="delete">delete</button>

mlibby_134680

By inspecting your HTML in my Google Chrome I can see that the rows were rearranged so that even the first line is inside <tbody> tag. Therefore the whole table is removed. You can fix this simply by wrapping the first row in <thead> tag or use different approach which does not use <tbody> tag.

user_108165370
Related