Given an HTML document that contains an HTML table, the task is to remove all rows from the HTML table. Removing all rows is different from removing a few rows. This can be done by using JavaScript.
Here we have two Approaches to removing all rows from a table:
Table of Content
Approach 1: Using remove() method
The remove() method in JQuery is used to remove all the selected elements including all the text. This method also removes data and all the events of the selected elements.
- First of all, set the ID or unique class to the table.
- Select the table element and use the remove() method to delete all table rows.
Example: In this example, All rows are deleted by using the remove() method.
<!DOCTYPE html><html>
<head>
<script src=
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<table id="table">
<colgroup>
<col id="myCol" span="2">
<col style="background-color:green">
</colgroup>
<tr>
<th>S.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
<tr id="row1">
<td>Geek_1</td>
<td>GeekForGeeks</td>
<th>Geek_id_1</th>
</tr>
<tr>
<td>Geek_2</td>
<td>GeeksForGeeks</td>
<th>Geek_id_2</th>
</tr>
<tr>
<td>Geek_3</td>
<td>GeeksForGeeks</td>
<th>Geek_id_3</th>
</tr>
<tr>
<td>Geek_4</td>
<td>GeeksForGeeks</td>
<th>Geek_id_4</th>
</tr>
</table>
<br>
<button onclick="Geeks()">
Click here
</button>
<p id="GFG_DOWN">
</p>
<script>
function Geeks() {
$("#table").remove();
$("#GFG_DOWN").text
("All rows of the table are deleted.");
}
</script>
</body>
</html>
|
Output:
How to remove all rows from a table in JavaScript ?
Approach 2: Using detach() method
Detach method is used to remove the selected element, with all texts and child nodes, leaving only data and events. the elements that are removed using this technique are saved in copy so they can be reinserted at a later time as needed.
Example: In this example, All rows are deleted by using detach() method.
<!DOCTYPE html><html>
<head>
<script src=
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<table id="table">
<colgroup>
<col id="myCol" span="2">
<col style="background-color:green">
</colgroup>
<tr id="thead">
<th>S.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
<tr id="row1">
<td>Geek_1</td>
<td>GeekForGeeks</td>
<th>Geek_id_1</th>
</tr>
<tr>
<td>Geek_2</td>
<td>GeeksForGeeks</td>
<th>Geek_id_2</th>
</tr>
<tr>
<td>Geek_3</td>
<td>GeeksForGeeks</td>
<th>Geek_id_3</th>
</tr>
<tr>
<td>Geek_4</td>
<td>GeeksForGeeks</td>
<th>Geek_id_4</th>
</tr>
</table>
<br>
<button onclick="Geeks()">
Click here
</button>
<p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
function Geeks() {
$('#table').detach();
$("#GFG_DOWN").text
("All rows of the table are deleted.");
}
</script>
</body>
</html>
|
Output:
How to remove all rows from a table in JavaScript ?