UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Removing rows from HTML table - jQuery

Demo and code for how to remove rows from HTML table using jQuery.

by Athil


Posted on 27 Jun 2018 Category: jQuery Views: 56

Edited on 28 Jun 2019


Here I am going to show how to remove a row from HTML table using jQuery.

DEMO

Demo code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo for remove rows from html table using jQuery</title>
</head>
<body>
    <h1>Demo for remove rows from html table using jQuery</h1>
    <table id="tbl1">
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Age</th></tr>
            <tbody>
                <tr><td>Name1</td><td>Address1</td><td>1</td><td><a class="RemoveRow">Remove </a></td></tr>
                <tr><td>Name2</td><td>Address2</td><td>2</td><td><a class="RemoveRow">Remove </a></td></tr>
                <tr><td>Name3</td><td>Address3</td><td>3</td><td><a class="RemoveRow">Remove </a></td></tr>
                <tr><td>Name4</td><td>Address4</td><td>4</td><td><a class="RemoveRow">Remove </a></td></tr>
                <tr><td>Name5</td><td>Address5</td><td>5</td><td><a class="RemoveRow">Remove </a></td></tr>
            </tbody>
            
    </table>

  


</body>
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <script>
        $(document).on('click', 'a.RemoveRow', function () {

            $(this).closest('tr').remove();
            return false;
        });
        </script>
</html>

 



Leave a Comment:


Advertisement