Remove A Specific Element From An Array In Javascript

Removing a specific element from an array in javascript is one of the most searched question on Google (in the javascript-related search category ;) ).

In this article, we will see the possible solutions and attempt to find the best one.

Splice

One common solution is to use indexOf to find the index of the element then remove it using splice.

Example (remove 2):

const array = [4, 2, 1, 2];
const indexToRemove = array.indexOf(2);

if (indexToRemove > -1) // if element's index is found
  array.splice(indexToRemove, 1); // remove 1 element from index indexToRemove
console.log(array); // = [4, 1, 2]

1) Note that this method is destructive, it mutates the original array.

2) It only removes 1 occurence, if the array contains multiple 2, it only removes the first one.

If you want to remove all occurrences, you can simply iterate the array and use splice:

for (const index in array) {
  if (array[index] === 2)
    array.splice(index, 1);
}

Filter

A non-destructive way is using filter which also remove all occurrences of the element. It's as simple as:

const array = [4, 2, 1, 2];
const newArray = array.filter(element => element !== 2);
console.log(newArray); // = [4, 1];

Delete operator

If you don't want to keep an empty slot in the array instead of removing completely and change the length. You can use the delete operator along with indexOf:

const array = [4, 2, 1, 2];
const indexToRemove = array.indexOf(2);

if (indexToRemove > -1) // if element's index is found
  delete array[indexToRemove]; // delete element in indexToRemove
console.log(array); // = [4, undefined, 1, 2]

1) Note that this method is destructive, it mutates the original array.

2) It only removes 1 occurence, if the array contains multiple 2, it only deletes the first one.

If you want to remove all occurrences, you can apply the same example with splice.

Push

Another non-destructive method is using push. You simply create a new array with iterating the original one and push the elements that you want to keep into the new one.

const array = [4, 2, 1, 2];
const newArray = [];
for (const element of array) {
  if (element !== 2)
    newArray.push(element);
}
console.log(newArray); // = [4, 1]

So which one is the best?

As you can see, each one of the methods above has different properties. If those properties don't matter to you, checkout this performance test.

Otherwise, it's up to you the pick the one that fits you and your team most.

Which one will you use?

Comments

[Mike Talbot ⭐]

I'd just point out that if you were trying to remove elements from an array that were infrequently found or unique then your performance test isn't reflective of what would happen with splice versus filter.

This performance test shows that difference.

[Arthur Dao]

Nice thanks for pointing that out!!!