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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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:
    


    • 




          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
PranchalKatiyar
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.