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

MoreOnFew
Posted underJavascript

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 a specific item from an array in JavaScript
Example showing how to remove a specific item from an array in JavaScript

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 Array related tutorials and articles.

TaggedArrayArray MethodsHow-toJavascript


MoreOnFew.com – Read tutorials related to JavaScript, jQuery, HTML5, CSS3 and more !

Cover Image for How to check if checkbox is checked in jQuery?

How to check if checkbox is checked in jQuery?

It is very easy to check if a checkbox is checked in jQuery using the .is() or .prop() method of jQuery combined with the ‘:checked’ selector. There are other ways too like checking for the attribute checked value, however, they aren’t very reliable. The easiest and most stable way to check if checkbox is checked … Read more

MoreOnFew
Cover Image for [Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

[Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

You might be facing an “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ ” error if you are using the react-router-dom package version 6. This error is caused due to using the older switch syntax of the react-router-dom. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. Let us take a look … Read more

MoreOnFew