How to use DOM deleteRow() method In Javascript
This method is used for removing an <tr> element from a table.
Syntax:
tableObject.deleteRow(index);
Example: In this example, we will see the use of deleteRow() 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 id="newtable">
<tr>
<th>S.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
<tr>
<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="document.getElementById(
'newtable').deleteRow(1)">
Click Here
</button>
</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