Want a free Ebook & latest Update Subscribe Now
  [email protected]      beta
Donate

AngularJs: Delete Table Row tr on button click

Delete Table row in AngularJs: Here in this article will explain in angularjs how to remove or delete a table row. In my previous article have explained how to insert or add new rows dynamically to html table using Angularjs. We have use ng-repeat directive to bind HTML table with JSON data so that our table contains some data from which we delete selected rows. Basically we have to remove an item from ng-repeat. In short, we have to eliminate an element from ng-repeat directive and in our case, our HTML element is selected table row TR.

These are standard function to have a table with data and having crud operations over it .i.e insert, update, delete function. Let’s head toward and learn how to remove a table row in AngularJS.

Steps to delete table row in AngularJS

  1. Setup: Download and import AngularJS file.
  2. HTML Markup: Add HTML table with dummy data and a delete button.
  3. AngularJs: Code to delete selected table row on button click.

 

OUTPUT:

AngularJS Delete Table Row , remove item from ng-repeat


 # Setup: Download and import AngularJS file.

You can download AngularJS files from angularjs.org, or you can use Google hosted files. After importing Angularjs file, add Directive ng-app & ng-controller to the body tag.

So now our HTML markup looks like as shown below

<html>
<head>
 <script src="angularjs/angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="myapp" ng-controller="tableController">
 
</body>
<html>

 


# Add HTML table with dummy data and delete button.

Here we have an HTML table with columns ( table heading ) as Name, Gender, City, and Action. Note inside Action column, we have our Delete Button which deletes the selected table row. Using ng-repeat directive, we bind data to our HTML table.

Now on the delete button, we added directive ng-click, and with deleteRow() function, selected row gets deleted. So our HTML markup looks like as written below.

<html>
<head>
 <script src="angularjs/angular.min.js" type="text/javascript"></script>
</head>

<body ng-app="myapp" ng-controller="tableController">
 <table class="table table-stripe" >
 <thead><tr>
 <th>Name</th>
 <th>Gender</th>
 <th> City </th>
 <th> Action </th>
 </tr></thead>
 <tbody>
 <tr ng-repeat="emp in employees">
   <td> {{ emp.Name }} </td>
   <td> {{ emp.Gender }} </td>
   <td> {{ emp.City }} </td>
   <td> <button class='btn btn-danger' ng-click="deleteRow($index)">Delete</button> </td>
 </tr>
 </tbody>
 </table>
</body>
<html>

 

Try It Yourself ⇒

#AngularJs: Code to delete table row on button click.

Here on click of delete button our deleteRow() function gets fire and using splice we remove the selected rows.

<script type="text/javascript">

 var app = angular.module("myapp", []);

 app.controller("tableController", ['$scope', function ($scope) {

 $scope.employees = [{ 'Name': 'Satinder Singh', 'Gender': 'Male', 'City': 'Bombay' },
 { 'Name': 'Leslie Mac', 'Gender': 'Female', 'City': 'Queensland' },
 { 'Name': 'Andrea ely ', 'Gender': 'Female', 'City': 'Rio' },
 { 'Name': 'Amit Sarna', 'Gender': 'Male', 'City': 'Navi Mumbai' },
 { 'Name': 'David Miller', 'Gender': 'Male', 'City': 'Scouthe'}];

   // delete function this remove the selected table row
   $scope.deleteRow= function (i) {
       $scope.employees.splice(i, 1);
   };

 } ]); 
</script>

 

  1. Conclusion:
    Directive ng-repeat is used to Bind data to our HTML table. Directive ng-click is applied on Delete button which fires deleteRow() function. And with splice remove the selected row. Hence we able to delete table row on button click.

Other Reference:

  1. Stackoverflow.com
Share:    
Satinder Singh

Hi all, am Founder and Author of Codepedia.info, also atypical polyglot programmer from Bombay, India. I have a passion to create, solve, and deploy software applications.
       ForEach ( minute in MyLife ) { myExperience++ ; }


2 comments on “AngularJs: Delete Table Row tr on button click”

  1. Chris Geirman

    I did something similar to this, but rather than delete the row immediately, I left a dismissable confirmation in it’s place. I believe it’s a better experience. Here’s my codepen.

    https://codepen.io/geirman/pen/pvvoyY

    I’d like to go one step further and provide a means to “undo” the deletion. The problem with these 1-click deletions is that they can too easily be done by accident. Providing the user with a backout plan is a good thing. I just never went back to round it out.


Post Comment


Your email address will not be published. Required fields are marked *