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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button: