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:
Table of Content
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.
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); |
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.
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); |
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().
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); |
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.
.
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); |
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().
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); |
Before: [ 1, 2, 3, 4, 5 ] After: [ 1, 2, 4, 5 ]