Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we will see how to remove the table row from a table using JavaScript.

This can be done in two ways:

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);

Example: In this example, we will see the use of deleteRow() method.

Javascript




<!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 id="newtable">
        <tr>
            <th>S.No</th>
            <th>Title</th>
            <th>Geek_id</th>
        </tr>
        <tr>
            <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="document.getElementById(
            'newtable').deleteRow(1)">
        Click Here
    </button>
</body>
 
</html>


Output:



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads