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?