How to remove the table row in a table using JavaScript ?
The remove() method is used to remove the table row from an HTML table using JavaScript.
remove() Method: This method removes the selected elements alongwith 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 remove it by using remove() method.
<!DOCTYPE HTML> <html> <head> <title> How to remove a table row from table </title> <style> #myCol { background:green; } table { color:white; } #Geek_p { color:green; font-size:30px; } td { padding:10px; } </style> </head> <body> <center> <h1 style = "color:green;" > GeeksForGeeks </h1> <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> </table> <br> <button onclick = "Geeks()"> Click here </button> <script> function Geeks() { document.getElementById("row1").remove(); } </script> </center> </body> </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Example 2: This example first selects the row by using tag name and then removes the appropriate element by index using remove() method.
<!DOCTYPE HTML> <html> <head> <title> How to remove a table row in a table </title> <style> #myCol { background:green; } table { color:white; } #Geek_p { color:green; font-size:30px; } td { padding:10px; } </style> </head> <body> <center> <h1 style = "color:green;" > GeeksForGeeks </h1> <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> </table> <br> <button onclick = "Geeks()"> Click here </button> <script> function Geeks() { document.getElementsByTagName("tr")[2].remove(); } </script> </center> </body> </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
.png)
.png)