How to Delete All Table Rows Except First One using jQuery?

Last Updated : 17 Oct, 2024

To delete all table rows except the first one using jQuery, you can target the rows and remove them while keeping the first row intact.

Approach

First, we create a table using <table> tag and add a button containing btn id. When a user clicks on the button, then the jQuery function is called. The jQuery function removes all the rows except the first one using the remove() method.

Syntax:

$('#btn').click(function () {
    $("#rTable").find("tr:gt(0)").remove();
});

Example:

HTML

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" 
          content="text/html; charset=utf-8">

    <script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
    </script>

    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 20px;
        }
    </style>


</head>

<body>
    <h4>
        Delete all table rows except
        first one using jQuery
    </h4>

    <table style="width:50%" id="rTable">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
    <br><br>

    <button id="btn">
        Remove All Row Except First One
    </button>

    <script>
        $(document).ready(function () {
            $('#btn').click(function () {
                $("#rTable").find("tr:gt(0)").remove();
            });
        });
    </script>
</body>

</html>