How to remove an item from an array in AngularJS scope?

Prepare for the operation

Before daring to save the world by updating your scope array, make sure:

1. Your array is alive and kicking within the scope.
2. The item you're after is hiding within the array (prevent "404 item not found errors").
3. You've planned for handling the array aftermath post-operation.

Efficient deletion strategies

Remove on the fly with $index

Eliminar el ítem within a dynamic ng-repeat array by harnessing the power of $index, and voila!

<div ng-repeat="person in persons">
  <span>{{ person.name }}</span>
  // Knockout button. One click, and the person vanishes!
  <button ng-click="removePerson($index)">Remove</button>
</div>


$scope.removePerson = function(index) {
  // Zap 'em!
  $scope.persons.splice(index, 1);
};


Confirm the contract hit with data integrity

When databases are part of your secret mission, it's crucial to confirm the hit on the server side before updating the client:

$scope.deleteAndRemove = function(person) {
  API.DeletePerson(person.id).then(function success() {
    // The sneaky varmint!
    var index = $scope.persons.indexOf(person);
    if (index !== -1) {
      // Adios, amigo!
      $scope.persons.splice(index, 1);
    }
  });
};


Call the hitman with API.DeletePerson and, once he gives you a thumbs-up through the success callback, remove the body from the $scope.persons and call it a day!

Track 'em down and wipe 'em out based on a condition

To eliminate multiple targets that meet specific conditions, assemble your troops and march through the array with angular.forEach:

// Saving Private Age
angular.forEach($scope.persons, function(value, key) {
  if (value.age < 18) {
    // "I'm 18 now, I swear!" Nope, you're out!
    $scope.persons.splice(key, 1);
  }
});


Calling in for backup: External Libraries

When the code turns into Algebra and then Quantum physics, utility libraries like Underscore.js or Lodash are your secret weapons for array manipulation:

// "Some men just want to watch the world burn!" Not on Underscore watch!
$scope.persons = _.without($scope.persons, _.findWhere($scope.persons, { id: person.id }));


Non-destructive surprise tactics

When the mission requires your original array to survive intact, filter builds a protective shell (new array).

// Mission Impossible: Preserve Array
$scope.filteredPersons = $scope.persons.filter(function(person) {
  return person.age >= 18; // They're legal, they stay!
});


Dealing with tricks and illusions

As conditions become akin to solving a Rubik's cube, go smooth with filter for code that's clean as a whistle:

// "+4 Card", you're out!
$scope.persons = $scope.persons.filter(function(person) {
  return !person.shouldBeRemoved();
});


Cleanup your mess

When your mission involved detonating UI elements linked to the purged item, it's cleanup time! Remove traces of old intel:

// "Who am I?" "You're nobody now!"
$scope.selectedPerson = null;
