Categories
arrays javascript

How can I remove a specific item from an array?

10801

How do I remove a specific value from an array? Something like:

array.remove(value);  // removes all elements with value

I have to use core JavaScript. Frameworks are not allowed.

6

  • 34

    array.remove(index) or array.pull(index) would make a lot of sense. splice is very useful, but a remove() or pull() method would be welcome… Search the internet, you will find a lot of “What is the opposite of push() in JavaScript?” questions. Would be great if the answare could be as simples as plain english: Pull!

    Oct 24, 2020 at 15:51


  • 3

  • 3

    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);

    Aug 3, 2021 at 16:57

  • 4

    array.filter((_, index) => index != number);

    Oct 22, 2021 at 21:57


  • 2

    @Gustavo Gonçalves I do not understand the problem: the opposite of Array#push() is well-known. (Of course, that is not what this question is asking for.)

    Feb 3 at 13:29

15362

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) { // only splice array when item is found
  array.splice(index, 1); // 2nd parameter means remove one item only
}

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

11

  • 523

    Serious question: why doesn’t JavaScript allow the simple and intuitive method of removing an element at an index? A simple, elegant, myArray.remove(index); seems to be the best solution and is implemented in many other languages (a lot of them older than JavaScript.)

    Sep 10, 2020 at 0:16


  • 20

    @Andrew sets and arrays are two completely different collection types.

    Dec 1, 2020 at 9:44

  • 8

    You can simplify this solution by counting down instead of up: for ( var i = ary.length – 1; i >= 0; i– ) { if ( ary[i] === value ) { ary.remove(i)} }

    Dec 8, 2020 at 22:30

  • 6

    function remove(item,array) { var new_array = [] new_ array = array.filter((ar)=> ar != item) return new_array }

    Jan 7, 2021 at 16:04

  • 10

    I’m a bit late to the party, but here’s my two cents: @a2br: Array.unshift() is basically what pull() would be if it existed! @Bob: Personally, I think it’s good that nothing similar to Array.remove() exists. We don’t want JavaScript to end up like PHP, now do we? xD

    Apr 15, 2021 at 9:12

2071

Edited on 2016 October

  • Do it simple, intuitive and explicit (Occam’s razor)
  • Do it immutable (original array stays 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 polyfilling with core-js.

Removing item (ECMA-262 Edition 5 code AKA old style 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 version 45, Firefox before version 22, and Safari before version 10. 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 version 47, Firefox before version 43, Safari before version 9, and Edge before version 14 but you can polyfill with core-js.

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

4

  • 2

    what if content of array are objects and nested objects

    Jan 11, 2021 at 9:51

  • 1

    doesn’t filter return an empty array if the condition isn’t met? So you have to be sure the element is going to be there or you’re getting it empty on return.

    Dec 2, 2021 at 0:56

  • 1

    The above answer would work only for primitive data types though for JavaScript as the object equality is not strict

    – Abregre

    Dec 14, 2021 at 10:06

  • Doesn’t work if I want to remove only one 3 from the array

    Jun 29 at 1:15

1625

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];

2

  • Great options to do the remove task.

    Jul 22 at 5:06

  • delete array[i] would degrade the performance of the application and is considered a bad pratice

    Jul 22 at 8:09