AngularJs: Delete Table Row tr on button click

/ / 2 Comments

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 to 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 the ng-repeat directive and in our case, our HTML element is selected table row TR. These are the standard functions 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:

# Setup: Download and import AngularJS file.

You can download AngularJS files from angularjs.org, or you can use google-hosted files. After importing the 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 the Action column, we have our Delete Button which deletes the selected table row.

Using the ng-repeat directive, we bind data to our HTML table. Now on the delete button, we added directive ng-click, and with deleteRow() function, the 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>

 #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>
View Demo

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

Other Reference:

  1. Stackoverflow.com

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

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

2 Comments