UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Remove rows from html table

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

by Athil


Posted on 24 May 2017 Category: jQuery Views: 845

Edited on 03 Jun 2017


DEMO

Hi, Here I am going to show how to remove a row item. 

Suppose I have a table with n rows and I put a remove button in each rows, When I click on the remove button from any row I need to remove the row programmatically, jQuery helps easily to remove row programmatically. in this way.

$(document).on('click', 'a.RemoveRow', function () {
          $(this).closest('tr').remove(); return false;
});

This code can easily remove the row which the clicked a tag existed row.

Full 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>

If you are using buttons instead of <a> tags to remove rows change the code in this way

$(document).on('click', 'a.RemoveRow', function () {
        $(this).closest('tr').remove(); return false;
});

 

RELATED POSTS

jQuery Adding rows to table



Leave a Comment:


Advertisement