javascript - How can I remove a specific item from an array?

ID : 8

viewed : 221

Tags : javascriptarraysjavascript

Top 5 Answer for javascript - How can I remove a specific item from an array?

vote vote

92

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; } 
vote vote

87

Edited on 2016 October

  • Do it simple, intuitive and explicit (Occam's razor)
  • Do it immutable (original array stay unchanged)
  • Do it with standard JavaScript functions, if your browser doesn't support them - use polyfill

In this code example I use "array.filter(...)" function to remove unwanted items from an array. This function doesn't change the original array and creates a new one. If your browser doesn't support this function (e.g. Internet Explorer before version 9, or Firefox before version 1.5), consider using the filter polyfill from Mozilla.

Removing item (ECMA-262 Edition 5 code aka oldstyle JavaScript)

var value = 3  var arr = [1, 2, 3, 4, 5, 3]  arr = arr.filter(function(item) {     return item !== value })  console.log(arr) // [ 1, 2, 4, 5 ] 

Removing item (ECMAScript 6 code)

let value = 3  let arr = [1, 2, 3, 4, 5, 3]  arr = arr.filter(item => item !== value)  console.log(arr) // [ 1, 2, 4, 5 ] 

IMPORTANT ECMAScript 6 "() => {}" arrow function syntax is not supported in Internet Explorer at all, Chrome before 45 version, Firefox before 22 version, and Safari before 10 version. To use ECMAScript 6 syntax in old browsers you can use BabelJS.


Removing multiple items (ECMAScript 7 code)

An additional advantage of this method is that you can remove multiple items

let forDeletion = [2, 3, 5]  let arr = [1, 2, 3, 4, 5, 3]  arr = arr.filter(item => !forDeletion.includes(item)) // !!! Read below about array.includes(...) support !!!  console.log(arr) // [ 1, 4 ] 

IMPORTANT "array.includes(...)" function is not supported in Internet Explorer at all, Chrome before 47 version, Firefox before 43 version, Safari before 9 version, and Edge before 14 version so here is polyfill from Mozilla.

Removing multiple items (in the future, maybe)

If the "This-Binding Syntax" proposal is ever accepted, you'll be able to do this:

// array-lib.js  export function remove(...forDeletion) {     return this.filter(item => !forDeletion.includes(item)) }  // main.js  import { remove } from './array-lib.js'  let arr = [1, 2, 3, 4, 5, 3]  // :: This-Binding Syntax Proposal // using "remove" function as "virtual method" // without extending Array.prototype arr = arr::remove(2, 3, 5)  console.log(arr) // [ 1, 4 ] 

Try it yourself in BabelJS :)

Reference

vote vote

79

I don't know how you are expecting array.remove(int) to behave. There are three possibilities I can think of that you might want.

To remove an element of an array at an index i:

array.splice(i, 1); 

If you want to remove every element with value number from the array:

for (var i = array.length - 1; i >= 0; i--) {  if (array[i] === number) {   array.splice(i, 1);  } } 

If you just want to make the element at index i no longer exist, but you don't want the indexes of the other elements to change:

delete array[i]; 
vote vote

66

It depends on whether you want to keep an empty spot or not.

If you do want an empty slot:

array[index] = undefined; 

If you don't want an empty slot:

//To keep the original: //oldArray = [...array];  //This modifies the array. array.splice(index, 1); 

And if you need the value of that item, you can just store the returned array's element:

var value = array.splice(index, 1)[0]; 

If you want to remove at either end of the array, you can use array.pop() for the last one or array.shift() for the first one (both return the value of the item as well).

If you don't know the index of the item, you can use array.indexOf(item) to get it (in a if() to get one item or in a while() to get all of them). array.indexOf(item) returns either the index or -1 if not found. 

vote vote

53

A friend was having issues in Internet Explorer 8 and showed me what he did. I told him it was wrong, and he told me he got the answer here. The current top answer will not work in all browsers (Internet Explorer 8 for example), and it will only remove the first occurrence of the item.

Remove ALL instances from an array

function removeAllInstances(arr, item) {    for (var i = arr.length; i--;) {      if (arr[i] === item) arr.splice(i, 1);    } } 

It loops through the array backwards (since indices and length will change as items are removed) and removes the item if it's found. It works in all browsers.

Top 3 video Explaining javascript - How can I remove a specific item from an array?

Related QUESTION?