Skip to content
Related Articles

Related Articles

Improve Article

How to Delete a Row from Table using AngularJS ?

  • Last Updated : 14 Oct, 2020

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.




<!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.




<!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:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :