Jquery Remove Table Row on Click Event

Hello Dev,

Today, i we will show you jquery remove table row on click event. This article will give you simple example of jquery remove table row on click event. you will learn jquery remove table row on click event. So let’s follow few step to create example of jquery remove table row on click event.

<!DOCTYPE html>

<html>
<head>
    <title>Jquery Remove Table Row on Click Event - codeplaners.com</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>codeplaners</td>
        <td>codeplaners@gmail.com</td>
        <td><button class="btn-remove">Remove</button></td>
    </tr>
    <tr>
        <td>2</td>
        <td>codeplaners</td>
        <td>codeplaners@gmail.com</td>
        <td><button class="btn-remove">Remove</button></td>
    </tr>
    <tr>
        <td>3</td>
        <td>codeplaners</td>
        <td>codeplaners@gmail.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>

Recommended Posts

Random Post