How to Remove a Specific Item from an Array in JavaScript ?

To remove a specific item from an array, it means we have given an array with a number n and we have to remove the element present at index n. In this article, we are going to learn how to remove a specific item from an array in JavaScript.

Below are the approaches to remove a specific item from an array in JavaScript:

Approach 1: Using splice() Method

JavaScript Array splice() Method is an inbuilt method in JavaScript that is used to modify the contents of an array by removing the existing elements and/or by adding new elements.

Syntax:

Array.splice( index, remove_count, item_list );

Example: In this example, we are using splice() a method.

Javascript

function removeItem(array, itemToRemove) {
    const index = array.indexOf(itemToRemove);
    console.log("Before:", array);
    if (index !== -1) {
        array.splice(index, 1);
    }
    console.log("After:", array);
}

// Example usage:
const myArray1 = [1, 2, 3, 4, 5];
 // Removes the element 3
removeItem(myArray1, 3);

Output

Before: [ 1, 2, 3, 4, 5 ]
After: [ 1, 2, 4, 5 ]

Approach 2: Using filter() Method

JavaScript Array filter() Method is used to create a new array from a given array consisting of only those elements from the given array that satisfy a condition set by the argument method. 

Syntax: 

array.filter(callback(element, index, arr), thisValue);

Example: In this example, we are using filter() method.

Javascript

function removeItem(array, itemToRemove) {
    console.log("Before:", array);
    const newArray = array
        .filter(item => item !== itemToRemove);
    console.log("After:", newArray);
}

// Example usage:
const myArray2 = [1, 2, 3, 4, 5];
// Removes the element 3
removeItem(myArray2, 3);

Output

Before: [ 1, 2, 3, 4, 5 ]
After: [ 1, 2, 4, 5 ]

Approach 3: Using indexOf() and slice() Methods

This approach combines indexOf() to find the index of the item to be removed and slice() to create a new array by concatenating the parts of the original array before and after the specified index. It ensures that the original array remains unchanged.

Example: In this example, we are using indexOf() and slice().

Javascript

function removeItem(array, itemToRemove) {
    const index = array.indexOf(itemToRemove);
    console.log("Before:", array);
    if (index !== -1) {
        array = array.slice(0, index)
        .concat(array.slice(index + 1));
    }
    console.log("After:", array);
}

// Example usage:
const myArray3 = [1, 2, 3, 4, 5];
 // Removes the element 3
removeItem(myArray3, 3);

Output

Before: [ 1, 2, 3, 4, 5 ]
After: [ 1, 2, 4, 5 ]

Approach 4: Using filter() and !== Operator

Similar to Approach 2, this approach uses the filter() method to create a new array by filtering out the item to be removed based on the inequality condition (!==). It emphasizes the simplicity of the code.

Example: In this example, we are using filter() and !== Operator..

Javascript

function removeItem(array, itemToRemove) {
    console.log("Before:", array);
    const newArray = array
        .filter(item => item !== itemToRemove);
    console.log("After:", newArray);
}

// Example usage:
const myArray4 = [1, 2, 3, 4, 5];
// Removes the element 3
removeItem(myArray4, 3);

Output

Before: [ 1, 2, 3, 4, 5 ]
After: [ 1, 2, 4, 5 ]

Approach 5: Using indexOf() and concat() Methods

This approach uses indexOf() to find the index of the item to be removed and then utilizes slice() and concat() for array concatenation to create a new array without the specified item. It demonstrates an alternative method of achieving the same result.

Example: In this example, we are using indexOf() and concat().

Javascript

function removeItem(array, itemToRemove) {
    const index = array.indexOf(itemToRemove);
    console.log("Before:", array);
    if (index !== -1) {
        array = array.slice(0, index)
        .concat(array.slice(index + 1));
    }
    console.log("After:", array);
}

// Example usage:
const myArray5 = [1, 2, 3, 4, 5];
// Removes the element 3
removeItem(myArray5, 3);

Output

Before: [ 1, 2, 3, 4, 5 ]
After: [ 1, 2, 4, 5 ]