clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

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

  Sumit Dey Sarkar
  24 Aug 2022
  JQuery
Imperial Advance Hero Image

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

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