jQuery Tutorial

How to delete Selected Multiple HTML Table Rows in jQuery?

Delete Selected Multiple HTML Table Rows in jQuery

        // gets the selected html rows checkbox's
        function getSelectedRows() {
            var selectedRows = []
            $('input[type=checkbox]').each(function () {
                if ($(this).is(":checked")) {
                    selectedRows.push($(this));
                }
            });
            return selectedRows;
        }
         // deleting selected multiple html table rows
        function deleteRows() {
            var selectedRows = getSelectedRows();
            for (var i = 0; i < selectedRows.length; i++) {
                $(selectedRows[i]).parent().parent().remove();
            }
        }

remove method can be used to remove HTML row content in the HTML table.

hide function

Instead of remove function, we can also use hide function to hide the particular row.

 $(selectedRows[i]).parent().parent().hide();

Example jQuery code to delete Multiple HTML Table Rows

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Delete Rows Dynamically</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnAddRow").on("click", function () {
                var row = $("#hdnRows").val();
                $("#tblPage").append('<tr>' +
                    '<td><input type="checkbox" id="chkRow' + row +'" /></td>' +
                    '<td><input type="text" id="txtID'+row+'" /></td>'+
                    '<td><input type="text" id="txtTitle' + row +'" /></td>'+
                    '<td><input type="text" id="txtDesc' + row + '"/></td>' +
       
                '</tr>');
            });

        });
        function getSelectedRows() {
            var selectedRows = []
            $('input[type=checkbox]').each(function () {
                if ($(this).is(":checked")) {
                    selectedRows.push($(this));
                }
            });
            return selectedRows;
        }
        function deleteRows() {
            var selectedRows = getSelectedRows();
            for (var i = 0; i < selectedRows.length; i++) {
                $(selectedRows[i]).parent().parent().remove();
            }
        }
    </script>
</head>
<body>
    <input type="hidden" id="hdnRows" value="1" />
    <table border="1">
        <thead>
            <tr>
                <th></th>
                <th>Id</th>
                <th>Title</th>
                <th>Desc</th>

            </tr>
        </thead>
        <tbody id="tblPage">
            <tr>
                <td><input type="checkbox" id="chkRow1"/></td>
                <td><input type="text" id="txtID1" /></td>
                <td><input type="text" id="txtTitle1" /></td>
                <td><input type="text" id="txtDesc1" /></td>

            </tr>
        </tbody>

    </table>
    <button id="btnAddRow">Add Row</button>
    <button id="btnDelete" onclick="deleteRows();">Delete Row</button>
</body>
</html>

Output:

Before deleting the HTML table rows