Delete All Rows in Table except the header row
Question
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
5 answers
solution1
0 2020-07-06 21:09:49
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>
solution2
0 ACCPTED 2020-07-06 21:09:51
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/
solution3
0 2020-07-06 21:10:25
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>
solution4
0 2020-07-06 21:10:58
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.
solution5
0 2022-12-17 11:42:35
That would be a simple one-liner:
function delTable() { console.log("Delete all rows, but the header"); $('#TableA').find("tr:not(:first)").remove(); // Code to remove all rows in table except the header row }
What the given code does is identify the rows in the table 'TableA' that is not the first row using the command: $('#TableA').find("tr:not(:first)") and subsequently remove the rows using the.remove() command.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.