Remove element from an array

The filter() method is the most versatile solution that easily removes one or more items, eighter based on value or index. This is an immutable solution. It doesn't delete the item but creates a new array from which it filtered out unwanted elements. It is widely supported, even with Internet Explorer. See the compatibility matrix.

The method requires a callback function as a parameter that will be invoked with the following arguments:

1. The value of the element, that is mandatory.
2. The index of the element is optional.
3. The original array itself is also optional.

The resulting array will contain the elements where the return value of the callback function is true.

let originalArray = [1, 2, 3, 4, 5];

let filteredArray = originalArray.filter(myFilter);

function myFilter(value) {
    return value < 3 || value > 4;
}

You can use the filter() method in a compact form using arrow functions if IE support is not important.

let originalArray = [1, 2, 3, 4, 5];

let filteredArray = originalArray.filter((value, index) => index !== 2);

Even if your array contains objects instead of basic datatypes the filter() method works straightforward. Just specify your callback function accordingly.

let originalArray = [
    {name: 'John', age: 23, color: 'red'}, 
    {name: 'Ann', age: 21, color: 'blue'}, 
    {name: 'Mike', age: 13, color: 'green'}
];

let filteredArray = originalArray.filter(value => value.age > 18);

Probably the simplest case if you just want to remove the first element of an array. For example in case of a FIFO queue. In this case, you can use the shift() method to remove the first item. The method returns the removed element so you can process it as you want. Despite filter() , shift() mutates the original array.

let myArray = [1, 2, 3, 4, 5];

let removedElement = myArray.shift(); 

A very similar case when you need something like a LIFO stack. The pop() method can be used to remove the last element of an array. It works similarly to the previously mentioned shift() method.

let myArray = [1, 2, 3, 4, 5];

let removedElement = myArray.pop();
// myArray: 1,2,3,4

If you want to remove a specific element from an array from anywhere, you can use the splice() method. Splice can not only remove elements but also replace and add new items. In this article, we only focus on how to remove an element.

With splice() you can remove one or more items at once. Define the start index as the first parameter. As a second parameter, you can define the number of items to be deleted. However, the second parameter is optional. If you don't specify, then all elements to the right will be removed from the array.

// splice(2) example
let myArray = [1, 2, 3, 4, 5];
console.log("Before: " + myArray);
myArray.splice(2);
console.log("After splice(2): " + myArray);

// splice(2, 1) example
myArray = [1, 2, 3, 4, 5];
console.log("Before: " + myArray);
myArray.splice(2, 1);
console.log("After splice(2, 1): " + myArray);

// splice(2, 2) example
myArray = [1, 2, 3, 4, 5];
console.log("Before: " + myArray);
myArray.splice(2, 2);
console.log("After splice(2, 2): " + myArray);

As splice() uses array indexes, if you want to delete by value, you must first find the index for the value.

Using the delete method may be obvious, but it works differently than you probably expect. It doesn't remove the element but clears the value. The array length will be the same as before and there will be an undefined value at the position you deleted.

let myArray = [1, 2, 3, 4, 5];

delete(myArray[2]);
// Result: 1,2,,4,5