In this article I will explain with an example, how to delete multiple Rows (Items) from HTML Table using CheckBoxes in AngularJS.
The HTML Table with multiple CheckBoxes will be populated using ng-repeat directive and the selected (checked) Rows (Items) will be deleted from HTML Table using AngularJS.
 
 
Delete multiple Rows (Items) using CheckBoxes in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML DIV consists of an HTML Button and Table which will be populated from JSON array using ng-repeat directive.
Each row of HTML Table along with the Header row consists of an HTML CheckBox.
Note: If you want to learn more about these directives please refer my article Introduction to AngularJS.
 
Population of multiple CheckBoxes
Inside the Controller, an array of JSON objects is created and assigned to the Customers JSON array.
The ng-repeat directive as the name suggests repeats the element based on the length of the collection, in this scenario it will repeat the TR element (HTML Table Row).
The TBODY element of the HTML Table has been assigned ng-repeat directive in order to iterate through all the items of the Customers JSON array.
For each JSON object in the Customers JSON array, a TR element (HTML Table Row) is generated and appended into the HTML Table.
 
Check Uncheck All functionality
Note: This functionality have been extensively covered in my article and hence please refer Check Uncheck All Multiple CheckBoxes using Single CheckBox.
 
Deleting multiple Items (Rows)
The Delete Button has been assigned ng-click directive. When the Button is clicked, the Delete function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
Inside the Delete function, first the indexes of all the checked (selected) items are stored into a JavaScript array named selected.
Then a loop is executed over the Customers JSON array and the checked (selected) item is removed from the Customers JSON array which ultimately removes the Row (Item) from the HTML Table.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            $scope.Customers = [
                { CustomerId: 1, Name: "John Hammond", Country: "United States", Selected: true },
                { CustomerId: 2, Name: "Mudassar Khan", Country: "India", Selected: true },
                { CustomerId: 3, Name: "Suzanne Mathews", Country: "France", Selected: true },
                { CustomerId: 4, Name: "Robert Schidner", Country: "Russia", Selected: true }
               ];
 
            $scope.CheckUncheckHeader = function () {
                $scope.IsAllChecked = true;
                for (var i = 0; i < $scope.Customers.length; i++) {
                    if (!$scope.Customers[i].Selected) {
                        $scope.IsAllChecked = false;
                        break;
                    }
                };
            };
            $scope.CheckUncheckHeader();
 
            $scope.CheckUncheckAll = function () {
                for (var i = 0; i < $scope.Customers.length; i++) {
                    $scope.Customers[i].Selected = $scope.IsAllChecked;
                }
            };
 
            $scope.Delete = function () {
                var selected = new Array();
                for (var i = 0; i < $scope.Customers.length; i++) {
                    if ($scope.Customers[i].Selected) {
                        selected.push(i);
                    }
                }
                for (var i = selected.length - 1; i >= 0; i--) {
                    $scope.Customers.splice(selected[i], 1);
                }
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th align="left">
                    <label>
                        <input type="checkbox" ng-model="IsAllChecked" ng-change="CheckUncheckAll()" />
                        CustomerId</label>
                </th>
                <th>
                    Name
                </th>
                <th>
                    Country
                </th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>
                        <label for="chkCustomer_{{m.CustomerId}}">
                            <input id="chkCustomer_{{m.CustomerId}}" type="checkbox" ng-model="m.Selected" ng-change="CheckUncheckHeader()" />
                            {{m.CustomerId}}
                        </label>
                    </td>
                    <td>
                        {{m.Name}}
                    </td>
                    <td>
                        {{m.Country}}
                    </td>
                </tr>
            </tbody>
        </table>
        <hr />
        <input type="button" value="Delete" ng-click="Delete()" />
    </div>
</body>
</html>
 
 
Screenshot
Delete multiple Rows (Items) using CheckBoxes in AngularJS
 
 
Demo
View Demo
 
 
Downloads
Download Code