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.
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 remove() method.
html
< h1 style = "color:green;" > GeeksforGeeks </ h1 > < 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 > |
Output:

How to remove the table row in a table using JavaScript?
Example 2: This example first selects the row by using tag name and then removes the appropriate element by index using remove() method.
html
< h1 style = "color:green;" > GeeksforGeeks </ h1 > < 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 > |
Output:

How to remove the table row in a table using JavaScript?
Please Login to comment...