How to Remove a Specific Item From an Array in JavaScript

Remove a Specific Item From an Array in JavaScript

There are plenty of options you can choose from according to what item you need to delete. Below you can see the full description with examples of each approach described in the previous table plus some bonus methods that you can use.

Remove the First Item From an Array

Use the shift() method to remove the first element of an array in JavaScript. It returns the deleted element and changes the array length.

const arr = [23, -12, 4, 7, 34];
const removedItem = arr.shift(); 

console.log('Removed element: ', removedItem); // -> 23
console.log('array: ', arr.join(', ')); // -> -12, 4, 7, 34

Output:

Removed element:  23
array:  -12, 4, 7, 34

Remove the Last Item From an Array

Use the pop() method to remove the last element of an array in JavaScript. It returns the deleted element and changes the array length.

const arr = [23, -12, 4, 7, 34];
const removedItem = arr.pop();

console.log('Removed element: ', removedItem); // -> 34
console.log('array: ', arr.join(', ')); // -> 23, -12, 4, 7

Output:

Removed element:  34
array:  23, -12, 4, 7

Remove an Item From an Array by Index

Use the splice(index, count) method to remove an element of an array by index. Its first two parameters determine respectively the index (from where to start the deleting process) and the count of the elements which should be removed (in our case, the count will be always 1 because we need to remove only one item). The method changes the array and returns a new array with the removed elements.

const arr = [23, -12, 4, 7, 34];
const index = 2;
const removedItemArr = arr.splice(index, 1); // returns a new array

console.log('Removed item: ', removedItemArr[0]); // prints the first element 
console.log('array: ', arr.join(', ')); // modifies the origin

Output:

Removed item:  4
array:  23, -12, 7, 34

Remove a Specific Item from an Array by Value

Remove a Specific Item Using indexOf() and splice() | First Occurrence

Use indexOf(value) and splice() methods to remove a specific item by value at the first found index. indexOf() returns the first index at which a given element can be found in the array. When it is found, we’ll use it in the splice() method to remove the item.

const arr = [23, -12, 4, 7, 34];

const index = arr.indexOf(-12); // finds the index of -12
arr.splice(index, 1); // deletes the element at that index

console.log('Array: ', arr.join(', '));

Output:

Array:  23, 4, 7, 34

Remove a Specific Item Using for loop, break, and splice() | First Occurrence

We’ll implement the same behavior as the previous example but instead of indexOf, we’ll use a for loop to iterate through the array. To find the first occurrence of the given value, we’ll break the loop.

const arr = [23, -12, 4, 7, 34];
const value = -12;

for (let i = 0; i < arr.length; i++) {
  if (arr[i] === value) {
    arr.splice(i, 1); // -> this line will be executed only once because of the break keyword
    break; // -> we stop next iterations 
  }
}
console.log('Array: ', arr.join(', '));

Output:

Array:  23, 4, 7, 34

Remove a Specific Item Using findIndex() and splice() | First Occurrence

Here instead of directly passing the value to the findIndex() method, we need to pass a callback function that provides a condition (the current item === value) and if the element satisfies it, the method will return the index of that element.

const arr = [23, -12, 4, 7, 34];

const value = -12;
const index = arr.findIndex(x => x === value);
const removedItemArr = arr.splice(index, 1);

console.log('Removed item: ', removedItemArr[0]);
console.log('array: ', arr.join(', ')); 

Output:

Removed item:  -12
array:  23, 4, 7, 34

Remove a Specific Item Using lastIndexOf() and splice() | Last Occurrence

Use lastIndexOf(value) and splice() methods to remove a specific item by value at the last found index. indexOf() returns the last index at which a given element can be found in the array. When it is found, we’ll use it in the splice() method to remove the item.

const arr = [23, -12, 4, 7, -12, 34]; // we have two elements -12 
const index = arr.lastIndexOf(-12); // gets the last index ---> the last occurance of the value 
arr.splice(index, 1);
console.log('Array: ', arr.join(', '));

Output:

Array:  23, -12, 4, 7, 34

Remove a Specific Item Using findLastIndex() and splice() | Last Occurrence

Here the only difference from the previous example is the parameter we pass to findLastIndex() – a callback function.

const arr = [23, -12, 4, 7, -12, 34];

const value = -12;
const index = arr.findLastIndex(x => x === value);
const removedItemArr = arr.splice(index, 1);

console.log('Removed item: ', removedItemArr[0]);
console.log('array: ', arr.join(', '));

Output:

Removed item:  -12
VM42:8 array:  23, -12, 4, 7, 34

Remove a Specific Item Using for loop, break, and splice() | Last Occurrence

const arr = [23, -12, 4, 7, -12, 34];
const value = -12;

for (let i = arr.length -1 ; i >= 0; i--) { // iterates from end to start
  if (arr[i] === value) {
    arr.splice(i, 1); // -> this line will be executed only once because of the break keyword
    break; // -> we stop next iterations 
  }
}
console.log('Array: ', arr.join(', '));

Output:

Array:  23, -12, 4, 7, 34

Conclusion

As you can see, the first example is the simplest way to find the smallest number in an array in JavaScript. Furthermore, we use the ES6 spread operator that reduces our code.