How do I delete an item or object from an array using ng-click?

javascript

angularjs

array-manipulation

javascript-best-practices

byAnton Shumikhin·Oct 13, 2024

Take a swift amendment to AngularJS arrays by wielding the .splice() method in a $scope function and calling it via ng-click:

$scope.deleteItem = function(index) {
  // Dikembe Mutombo's way of blocking array elements. Not today, element at 'index'!
  $scope.items.splice(index, 1);
};

In your HTML, apply your deleteItem function with ng-repeat and pass $index to ng-click:

<div ng-repeat="item in items">
  {{ item }} <button ng-click="deleteItem($index)">Delete</button>
</div>

Click the button and the associated item waves goodbye from the items array.

Handling array manipulation in AngularJS

When we dive deeper into AngularJS, the splice method serves as your trusty sword for removing items. By dispatching the item's index to .splice(), Angular turns the crank, refreshing your UI as a result of its robust data binding.

Advanced strategies for item removal

A couple of handpicked tactics for efficient item removal from an AngularJS array:

Seek and Destroy: Apart from $index, you might want to remove items based on distinct properties. Utilizing a property like id to uniquely identify items becomes important when you are unsure about the stability of $index, especially after array filtering.
One to Rule Them All: Establish a deleteFilteredItem() function that can be manipulated for different array types. This adds a universal delete function to your code arsenal, making it easier to maintain:

$scope.deleteItemById = function(itemId) {
  let index = $scope.items.findIndex(item => item.id === itemId);
  if(index !== -1) {
    // Sparta kicked the element out of the array
    $scope.items.splice(index, 1);
  }
};

Two Birds, One Stone: For simultaneous client and server updates, $resource can wipe out items both in the array and on the server, maintaining a synced data state.

Safeguard against common pitfalls

Manual $digest is not required. Angular's data binding does the UI refreshing for you, automatically.
In filtered lists, using $index can trick you as it refers to the index in the filtered array, not the original. For bullet-proof deletion, track by a unique key that remains unchanged regardless of the order.

Elevate your code with dot notation

When preparing your array in $scope, it's ideal to use dot notation, yielding a more organized and bug-proof code structure:

$scope.list = { items: [] }; // Neat and tidy as compared to $scope.items = []

Keeping pace with AngularJS changes

AngularJS, being highly dynamic, transitions over time, and internal properties like $$hashKey might change. Encourage use of official APIs and refrain from depending on internal structures for a more future-proof solution.