How To Delete(Remove) Parent Table Row (tr) On Button Click Event Using jQuery

AuthorSumit Dey Sarkar

Pubish Date24 Aug 2022

categoryJQuery

In this tutorial we will learn how to delete(remove) parent table row (tr) on button click event using jQuery.

Some time we need to delete any single row from a table then we need to use below example to remove a parent table row on button click event using jQuery.

Here we use two different way to delete parent table row on click event using jQuery.

let's see example -

1) How to remove parent table row on button click event using jQuery

<!DOCTYPE html>
<html>

<head>
    <title>How To Delete(Remove) Parent Table Row (tr) On Button Click Event Using jQuery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

<body>

    <table border="1">
        <tr>
            <th>Sn</th>
            <th>Full Name</th>
            <th>Email Address</th>
            <th>Action</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Hariom Prajapati</td>
            <td>hariom@gmail.com</td>
            <td><button class="delete-button">Remove</button></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Parvez Ahmed</td>
            <td>parvez@gmail.com</td>
            <td><button class="delete-button">Remove</button></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Virat Prajapati</td>
            <td>virat@gmail.com</td>
            <td><button class="delete-button">Remove</button></td>
        </tr>
    </table>

    <script type="text/javascript">

        $(document).ready(function () {

            $("body").on("click", ".delete-button", function () {
                $(this).closest('tr').remove();
            });

        });

    </script>

</body>

</html>

 

Output

jQuery

2) How to remove parent table row on button click event using jQuery

<!DOCTYPE html>
<html>

<head>
    <title>How To Delete(Remove) Parent Table Row (tr) On Button Click Event Using jQuery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

<body>

    <table border="1">
        <tr>
            <th>Sn</th>
            <th>Full Name</th>
            <th>Email Address</th>
            <th>Action</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Hariom Prajapati</td>
            <td>hariom@gmail.com</td>
            <td><button class="delete-button">Remove</button></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Parvez Ahmed</td>
            <td>parvez@gmail.com</td>
            <td><button class="delete-button">Remove</button></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Virat Prajapati</td>
            <td>virat@gmail.com</td>
            <td><button class="delete-button">Remove</button></td>
        </tr>
    </table>

    <script type="text/javascript">

        $(document).ready(function () {

            $("body").on("click", ".delete-button", function () {
                 $(this).parent().parent().remove();
            });

        });

    </script>

</body>

</html>

 

Output

jQuery

Comments 0

Leave a comment