How to remove a specific item from an array in Javascript

Q & A › Category: All › How to remove a specific item from an array in Javascript

Luci Staff asked 3 years ago

Solution:

There are number of solutions to remove a specific item from an array in Javascript. Let say you have an array

var array = [1, 2, 3, 4, 5, 6]

and you want to remove the number 3 from that above array. Let do it
Method 1: Using splice #
If you know the index of the item in the array, you can easily remove it with splice

var array = [1, 2, 3, 4, 5, 6]
array.splice(i, 1);

If you don’t know the index, you have to find the index of the array element you want to remove using indexOf, and then remove that index with splice.

var array = [1, 2, 3, 4, 5, 6]
console.log(array);

const index = array.indexOf(3);
if (index > -1) {
  array.splice(index, 1);
}

// array = [2, 9]
console.log(array);

The second parameter of splice is the number of elements to remove. Note that splice modifies the array in place and returns a new array containing the elements that have been removed.
Method 2: Using filter #
Javascript comes with handy filter function
To remove an item from array using filter

var value = 2

var arr = [1, 2, 3, 4, 5, 2]

arr = arr.filter(function(item) {
    return item !== value
})

console.log(arr)
// [ 1, 3, 4, 5 ]

or it is a little simple with arrow function if you are using ECMAScript 6

let value = 2

let arr = [1, 2, 3, 4, 5, 2]

arr = arr.filter(item => item !== value)

console.log(arr)
// [ 1, 3, 4, 5 ]

1 Answers

0 Vote Up Vote Down

Mike answered 3 years ago

Find the index of the array element you want to remove using indexOf, and then remove that index with splice.
The splice() method changes the contents of an array by removing existing elements and/or adding new elements.

const array = [2, 5, 9];

console.log(array);


const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}

// array = [2, 9]
console.log(array);

The second parameter of splice is the number of elements to remove. Note that splice modifies the array in place and returns a new array containing the elements that have been removed.

For the reason of completeness, here are functions. The first function removes only a single occurrence (i.e. removing the first match of 5 from [2,5,9,1,5,8,5]), while the second function removes all occurrences:

function removeItemOnce(arr, value) {
  var index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

function removeItemAll(arr, value) {
  var i = 0;
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1);
    } else {
      ++i;
    }
  }
  return arr;
}
// Usage
console.log(removeItemOnce([2,5,9,1,5,8,5], 5))
console.log(removeItemAll([2,5,9,1,5,8,5], 5))

In TypeScript, these functions can stay type-safe with a type parameter:

function removeItem<T>(arr: Array<T>, value: T): Array<T> { 
  const index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}