How to remove the table row in a table using JavaScript ?

23 May, 2019
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:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Roadmap to Learn JavaScript For Beginners
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Roadmap to Learn JavaScript For Beginners
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?