In this tutorial, We will learn how to delete the parent table row on click event in jquery. We will show remove parent tr using button click event in js. i will give you two examples for remove the table row on button click in jquery.


Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Jquery - Remove Parent Table Row on Button Click Event</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Test</td>
                <td>test@test.com</td>
                <td><button class="btn-remove">Remove</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Demo</td>
                <td>demo@demo.com</td>
                <td><button class="btn-remove">Remove</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Test Demo</td>
                <td>testdemo@testdemo.com</td>
                <td><button class="btn-remove">Remove</button></td>
            </tr>
        </table>
        <script type="text/javascript">
            $(document).ready(function () {
                $("body").on("click", ".btn-remove", function () {
                    $(this).closest('tr').remove();
                });
            });
        </script>
    </body>
</html>


Thanks, May this example will help you......