How to Delete a Row from Table using AngularJS
In this guide, we’ll learn how to remove or delete a row from an HTML table using AngularJS. We’ll use the ng-click directive and the splice() method to achieve this.
Store the table data in an array.
Use ng-repeat to display the array in an HTML table.
When a user clicks a button next to the table row, the index of that row is passed to the splice() method, which removes the row from the array.
Step 1: Example with a Single Column
In this example, we’ll create a table with one column and allow the user to delete a row by clicking a link next to it.
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.rows = ['row-1', 'row-2', 'row-3', 'row-4', 'row-5', 'row-6'];
$scope.remThis = function (index) {
if (index != -1) {
$scope.rows.splice(index, 1);
}
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">AngularJS Row Deletion</h1>
<p>Click "Delete" to remove a row from the table.</p>
<div ng-app="app">
<div ng-controller="controller">
<table style="border: 1px solid black; margin: 0 auto;">
<tr><th>Column 1</th></tr>
<tr ng-repeat="val in rows">
<td>{{ val }}</td>
<td><a href="#" ng-click="remThis($index)">Delete</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>Explanation:
The ng-repeat directive is used to generate table rows from the rows array.
The ng-click directive calls the remThis() function, passing the index of the row to be deleted.
The splice() method removes the row at the given index.
Step 2: Example with Multiple Columns
In this example, we’ll create a table with three columns, and each row can be deleted the same way as in the first example.
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.rows = [
{ 'ff': '11', 'fs': '12', 'ft': '13' },
{ 'ff': '21', 'fs': '22', 'ft': '23' },
{ 'ff': '31', 'fs': '32', 'ft': '33' },
{ 'ff': '41', 'fs': '42', 'ft': '43' }
];
$scope.remThis = function (index) {
if (index != -1) {
$scope.rows.splice(index, 1);
}
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">AngularJS Row Deletion with Multiple Columns</h1>
<p>Click "Delete" to remove a row from the table.</p>
<div ng-app="app">
<div ng-controller="controller">
<table style="border: 1px solid black; margin: 0 auto;">
<tr>
<th>Col-1</th>
<th>Col-2</th>
<th>Col-3</th>
</tr>
<tr ng-repeat="val in rows">
<td>{{ val.ff }}</td>
<td>{{ val.fs }}</td>
<td>{{ val.ft }}</td>
<td><a href="#" ng-click="remThis($index)">Delete</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>Explanation:
Each row contains three columns, and the data is stored in an array of objects.
When the “Delete” link is clicked, the row corresponding to that object is removed from the table.
By using AngularJS and the splice() method, you can easily delete rows from an HTML table. This method is efficient and perfect for dynamic web applications where you need to manage data in real time.
Keep Learning 🙂