How to Delete a Row from Table using AngularJS ? Last Updated : 29 Jul, 2024 Suggest changes Share Like Article Like Report Given a HTML table and the task is to remove/delete the row from the table with the help of AngularJS.Approach: The approach is to delete the row from the array where it stored and served to the table data. When the user clicks on the button near to the table row, it passes the index of that table and that index is used to remove the entry from the array with the help of splice() method.Example 1: This example contains a single column, each row can be removed by the click next to it. html <!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, content) { if (index != -1) { $scope.rows.splice(index, 1); } }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> How to remove a row from the table in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> <table style="border: 1px solid black; margin: 0 auto;"> <tr> <th>Col-1</th> </tr> <tr ng-repeat="val in rows"> <td>{{val}}</td> <td><a href="#" ng-click= "remThis($index, content)"> click here </a> </td> </tr> </table><br> </div> </div> </body> </html> Output:Example 2: This example contains three columns, each row can be removed by the click next to it. html <!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.c = 2; $scope.remThis = function (index, content) { if (index != -1) { $scope.rows.splice(index, 1); } }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> How to remove a row from the table in AngularJS </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, content)"> click here</a> </td> </tr> </table><br> </div> </div> </body> </html> Output: Advertise with us Next Article How to Delete a Row from Table using AngularJS ? P PranchalKatiyar Follow Similar Reads How to Remove HTML element from DOM using AngularJS ? In this article, we will see how to remove particular HTML elements from the DOM with the help of AngularJS, along with understanding its implementation through the examples. For this, we can use the remove() method that helps to remove all the selected elements including all the text. Syntax: selec 2 min read How to print an array in table format using angularJS? Given an array & the task is to print the given array in the tabular format using AngularJS. In JavaScript, data can be stored in the form of arrays. Each of the array items has unique indexing, starting from 0. But what if the developer wants to display all the items that are in the array, on t 4 min read How to empty the content of an element using AngularJS ? In this article, we will see how to remove the content of an element in HTML DOM using AngularJS. This task can be accomplished by implementing the jQuery empty() method that removes all child nodes and their content for the selected elements. Syntax: element.empty();Parameter: This method does not 2 min read How to append a new table row in AngularJS ? In this article, we will see how to insert or append the new table row in AngularJS, along with knowing its implementation through the examples. Approach: The approach is to use the push() method to insert the new rows into the array. This array will be served as the content to the <tr> elemen 2 min read How to make empty an array using AngularJS ? Given an array & the task is to make empty an array or delete all the elements from the array in AngularJS. In order to do this, there are 2 ways i.e., either use the [] notation to reinitialize the array which eventually removes all the elements from the array, or set the length of the array to 2 min read Article Tags : Web Technologies HTML AngularJS HTML-Misc AngularJS-Misc +1 More Like