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

Last Updated : 14 May, 2024

Removing a table row in JavaScript involves targeting the row element by its index or unique identifier, then using the remove() method to delete it from the DOM. This updates the table dynamically without requiring a page reload.

This can be done in two ways:

Table of Content

JavaScript remove() Method
Using DOM deleteRow() method

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 the remove() method.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to remove the table row 
        in a table using JavaScript ?
    </title>

    <style>
        table {
            margin: auto;
        }
        table, th, tr, td {
            border: 1px solid black;
        }
    </style>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3>
        Remove Table Row from a Table
    </h3>

    <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>
</body>

</html>

Output:

Removing table row using remove() method

Example 2: This example first selects the row by using the tag name and then removes the appropriate element by index using the remove() method.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to remove the table row 
        in a table using JavaScript ?
    </title>

    <style>
        table {
            margin: auto;
        }
        table, th, tr, td {
            border: 1px solid black;
        }
    </style>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3>
        Remove Table row from a Table
    </h3>
    
    <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>
</body>

</html>

Output:

Using DOM deleteRow() method

This method is used for removing an <tr> element from a table.

Syntax:

tableObject.deleteRow(index);