How to remove a specific item from an array in JavaScript?

There are a ton of ways to remove an array items in JavaScript. but in this article we are going to see couple most used methods of removing array items.

removing array item using indexOf() and splice()

In this case, we are going to use indexOf() method to find the item index, and then use splice() method to remove the item from array.

Let’s see this with an example:

const arr = ['apple', 'orange', 'cherry'];
const index = arr.indexOf('orange');

if (index > -1) {
  arr.splice(index, 1);
}

console.log(arr);

// OUTPUT
// ['apple', 'cherry']

In above example we are using indexOf('orange') method to find the index for ‘orange’ item inside the array.

Then we are checking if(index > -1) if the index is found within array then using splice(index, 1) to removing the item from the array.

The result in case would be an array with 2 items ['apple', 'cherry'].

remove all occurrences using forloop and splice()

In previous example we used splice(index, 1) method to remove item from array only once. But what if we need to remove all matching items from an array?

To remove all matching items from array in JavaScript, we are going to use forloop to iterate the array and for any matching item, then we would use splice() method to remove that item from array.

const arr = ['apple', 'orange', 'cherry', 'apple', 'cherry'];
const toDelete = 'apple';

for (let i = 0; i < arr.length; i++) {
  if (arr[i] == toDelete) {
    arr.splice(i, 1)
  }
}

console.log(arr);
                               
// OUTPUT
// ['orange', 'cherry', 'cherry']

remove array items using filter() method

To remove all occurrences and specific item from a JavaScript array, we can use array filter() method with lesser and cleaner code to do.

Let’s see this with an example: 

const arr = ['apple', 'orange', 'cherry', 'apple', 'cherry'];
const toDelete = 'apple';

const newArr = arr.filter((item) => item !== toDelete);
console.log(newArr);

// OUTPUT
// ['orange', 'cherry', 'cherry']

create custom function to remove specific items from array

So far we used indexOf(), foorloop, splice() and filter() methods to remove specific items from JavaScript array.

If you are in a situation that you need to remove items from array in more than one place in your project, then it would make a lot of sense to create your own function and re-use it anywhere within your application.

const toDelete = 'apple';
const arr = ['apple', 'orange', 'cherry', 'apple', 'cherry'];

const removeItemOnce = (arr, item) => {
  const index = arr.indexOf(item);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

const removeAllOccurrences = (arr, item) => {
  const newArr = arr.filter((ele) => ele !== item)
  return newArr;
}

console.log('Removed Once:', removeItemOnce(arr, toDelete));
console.log('Removed all occurrences:', removeAllOccurrences(arr, toDelete));

// OUTPUT
// Removed Once: ['orange', 'cherry', 'apple', 'cherry']
// Removed all occurrences: ['orange', 'cherry', 'cherry']
%d bloggers like this: