JavaScript remove() Method
This method removes the selected elements along with text and child nodes. This method also removes data and events of the selected elements.
Syntax:
node.remove();
Example 1: This example first selects the row by id value and then removes it by using the remove() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to remove the table row
in a table using JavaScript ?
</title>
<style>
table {
margin: auto;
}
table, th, tr, td {
border: 1px solid black;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
w3wiki
</h1>
<h3>
Remove Table Row from a Table
</h3>
<table>
<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>w3wiki</td>
<th>Geek_id_2</th>
</tr>
</table>
<br>
<button onclick="Geeks()">
Click Here
</button>
<script>
function Geeks() {
document.getElementById("row1").remove();
}
</script>
</body>
</html>
Output:
Removing table row using remove() method
Example 2: This example first selects the row by using the tag name and then removes the appropriate element by index using the remove() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to remove the table row
in a table using JavaScript ?
</title>
<style>
table {
margin: auto;
}
table, th, tr, td {
border: 1px solid black;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
w3wiki
</h1>
<h3>
Remove Table row from a Table
</h3>
<table>
<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>w3wiki</td>
<th>Geek_id_2</th>
</tr>
</table>
<br>
<button onclick="Geeks()">
Click Here
</button>
<script>
function Geeks() {
document.getElementsByTagName("tr")[2].remove();
}
</script>
</body>
</html>
Output:
How to remove the table row in a table using JavaScript ?
Removing a table row in JavaScript involves targeting the row element by its index or unique identifier, then using the remove() method to delete it from the DOM. This updates the table dynamically without requiring a page reload.
This can be done in two ways:
Table of Content
- JavaScript remove() Method
- Using DOM deleteRow() method