How to remove a specific item from an array in JavaScript?

In JavaScript, the Array Object has been one of the most commonly used objects, and hence most of us would already have a good understanding of Array methods. However, there are times when we notice that there might not be a predefined method to achieve a certain task that might seem very common. One such case is the need to remove a specific item from an Array. Let us take a look at modern and simple way to remove a specific item from an Array in JavaScript.

How to remove a specific item from Array by value in JavaScript

As you might have already figured out, there are no predefined methods in the Array object that can help us remove a specific item from an Array by its value. However, you can use the Array Filter method to achieve it.

Example showing use of Array Filter method to remove specific item from Array

const colors = ['red', 'green', 'blue', 'orange', 'pink', 'yellow'];
const removeColor = 'blue';
const result = colors.filter(
    item => item != removeColor
);
console.log(result) /* ['red', 'green', 'orange', 'pink', 'yellow'] */

You can convert the above code into an Arrow function as shown in the next section.

Method to remove specific item from Array by value

const removeByValue = (arr, valueToRemove) => arr.filter(item => item != valueToRemove);

const colors = ['red', 'green', 'blue', 'orange', 'pink', 'yellow'];
removeByValue(colors, 'blue') /* pass the array and the item value to be removed */

Output of the Above code would be as below

['red', 'green', 'orange', 'pink', 'yellow']

As you can notice, the returned value is a new Array after removing the item with value Blue. This way your original array stays intact.

How to remove specific item from Array by Index in JavaScript

On the other hand if you are looking to remove an item from Array using its index , then you can try out the following code:

const colors = ['red', 'green', 'blue', 'orange', 'pink', 'yellow'];
const removeIndex = 2;
const result = colors.filter(
    (item, i) => i != removeIndex
);
console.log(result) /* ['red', 'green', 'orange', 'pink', 'yellow'] */

The above given code can also be written as an Arrow method as show below.

Method to remove specific item from Array by Index

const removeByIndex = (arr, indexToRemove) => arr.filter((item, i) => i != indexToRemove);

const colors = ['red', 'green', 'blue', 'orange', 'pink', 'yellow'];
removeByIndex(colors, 2) /* pass the array and the Index of the item to be removed */

Output of the Above code would be:

['red', 'green', 'orange', 'pink', 'yellow']

As I mentioned earlier, there are times when we might come across scenarios where there might not be an existing or predefined method available to be used for a very common task. In such cases the alternative we have is to use other predefined methods to create a custom method, which would help us achieve what we want. One such scenario is the need to remove a specific item from an Array. And as you can see, we can make use of the existing Array Filter method to achieve what we want.

While there are many different ways available online to remove a specific item from an Array in JavaScript, including the splice() method, the ones shown above are modern and simple ways to do it. These methods would not alter the original Array and would keep it safe and immutable. Hope you liked this article. You can also check our other JavaScript related tutorials and articles.