How to Delete a Row from Table using AngularJS ? Last Updated : 29 Jul, 2024 Comments Improve Suggest changes 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: Comment More infoAdvertise with us Next Article How to Delete a Row from Table using AngularJS ? P PranchalKatiyar Follow Improve Article Tags : Web Technologies HTML AngularJS HTML-Misc AngularJS-Misc +1 More 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 How to Delete All Table Rows Except First One using jQuery? To delete all table rows except the first one using jQuery, you can target the rows and remove them while keeping the first row intact.ApproachFirst, we create a table using <table> tag and add a button containing btn id. When a user clicks on the button, then the jQuery function is called. Th 1 min read How to fetch the details using ng-repeat in AngularJS ? In this article, we will see how to fetch the details with the help of the ng-repeat directive in Angular, along with understanding its implementation through the illustrations. AngularJS contains various types of pre-defined Directives, where most of the directives start with ng which denotes Angul 2 min read How to delete an element from an array using JavaScript ? The array is a type of data structure that allows us to store similar types of data under a single variable. The array is helpful to create a list of elements of similar types, which can be accessed using their index. In this article, we will discuss different ways to remove elements from the array. 5 min read How to Filter Multiple Values in AngularJS ? AngularJS is one of the popular frameworks of many web developers to create dynamic single-page web applications. To make the application more and more dynamic, we can use the filtering of data feature to dynamically show the data to the user as per the input or selection. These provide a better use 6 min read How to push elements in an array using AngularJS ? Given an array and the task is to perform the push operation on the array using AngularJS. The arr.push() method is used to push one or more values into the array, & new values will add at the end of an array. This method changes the length of the array by the number of elements added to the arr 2 min read Like