Open In App

How to remove all rows from a table in JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

Given an HTML document that contains an HTML table, the task is to remove all rows from the HTML table. Removing all rows is different from removing a few rows. This can be done by using JavaScript. 

Here we have two Approaches to removing all rows from a table:

Approach 1: Using remove() method

The remove() method in JQuery is used to remove all the selected elements including all the text. This method also removes data and all the events of the selected elements.

  • First of all, set the ID or unique class to the table.
  • Select the table element and use the remove() method to delete all table rows.

Example: In this example, All rows are deleted by using the remove() method

html




<!DOCTYPE html>
<html>
<head>
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <table id="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>
        <tr>
            <td>Geek_3</td>
            <td>GeeksForGeeks</td>
            <th>Geek_id_3</th>
        </tr>
        <tr>
            <td>Geek_4</td>
            <td>GeeksForGeeks</td>
            <th>Geek_id_4</th>
        </tr>
    </table>
    <br>
 
    <button onclick="Geeks()">
        Click here
    </button>
 
    <p id="GFG_DOWN">
    </p>
 
    <script>
        function Geeks() {
            $("#table").remove();
            $("#GFG_DOWN").text
                ("All rows of the table are deleted.");
        }
    </script>
</body>
</html>


Output:

How to remove all rows from a table in JavaScript ?

How to remove all rows from a table in JavaScript ?

Approach 2: Using detach() method

Detach method is used to remove the selected element, with all texts and child nodes, leaving only data and events. the elements that are removed using this technique are saved in copy so they can be reinserted at a later time as needed.

Example: In this example, All rows are deleted by using detach() method

html




<!DOCTYPE html>
<html>
<head>
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <table id="table">
        <colgroup>
            <col id="myCol" span="2">
            <col style="background-color:green">
        </colgroup>
 
        <tr id="thead">
            <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>
        <tr>
            <td>Geek_3</td>
            <td>GeeksForGeeks</td>
            <th>Geek_id_3</th>
        </tr>
        <tr>
            <td>Geek_4</td>
            <td>GeeksForGeeks</td>
            <th>Geek_id_4</th>
        </tr>
    </table>
    <br>
 
    <button onclick="Geeks()">
        Click here
    </button>
 
    <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;">
    </p>
 
    <script>
        function Geeks() {
            $('#table').detach();
            $("#GFG_DOWN").text
                ("All rows of the table are deleted.");
        }
    </script>
</body>
</html>


Output:

How to remove all rows from a table in JavaScript ?

How to remove all rows from a table in JavaScript ?



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