How to remove the table row in a table using JavaScript ?
Last Updated :
20 Dec, 2023
In this article, we will see how to remove the table row from a table using JavaScript.
This can be done in two ways:
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.Â
html
<!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;" >
GeeksforGeeks
</ 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 >GeeksForGeeks</ 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.Â
html
<!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;" >
GeeksforGeeks
</ 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 >GeeksForGeeks</ 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:
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.
Javascript
<!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;" >
GeeksforGeeks
</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>GeeksForGeeks</td>
<th>Geek_id_2</th>
</tr>
</table>
<br>
<button onclick= "document.getElementById(
'newtable').deleteRow(1)" >
Click Here
</button>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...