Remove an Element From an Array in JavaScript

In JavaScript, you can store multiple values in a single variable by creating an Array. Each value, called an “item,” gets its own number, called the “index,” that you can use to reference it.

Here’s an example with an Array that stores a shopping list for groceries:

let shoppingList = ['apples', 'bananas', 'oranges', 'pears']

console.log(shoppingList) // Logs ['apples', 'bananas', 'oranges', 'pears']
console.log(shoppingList[0]) // Logs apples
console.log(shoppingList[1]) // Logs bananas
console.log(shoppingList[2]) // Logs oranges
console.log(shoppingList[3]) // Logs pears

But what if you, for one reason or another, needed to remove an item from an Array?

But what if you, for one reason or another, need to remove an item from an array? You’re here reading this, so you know it can be done. So the question is, how? Read on, because that’s exactly what we’ll go over in this tutorial.

How to Remove an Element From an Array

There are several methods for removing an item from an Array in JavaScript, and the right one to use depends on whether you want to remove that item based on its index or its value.

Specifically, you can use the splice(), filter(), slice(), pop(), and shift() methods. Each of these methods has its ins and outs, and the table below will help you decide between them.

Now let’s look at each method in more detail.

With the splice() Method

You can use the splice() method to add or remove elements from an Array. To remove an item from an array, you need to specify the index of the item that you want to remove, and the number of items you want removed.

For example:

let shoppingList = ['apples', 'bananas', 'oranges', 'pears'];
shoppingList.splice(2, 1);

console.log(shoppingList) // Logs ['apples', 'bananas', 'pears']

With the filter() Method

The filter() method creates a new Array that has all the elements that pass the test implemented by the provided function. To remove an item from an array, you can use the filter() method and return only the elements that are not equal to the item you want to remove.

For example:

let shoppingList = ['apples', 'bananas', 'oranges', 'pears'];
let filteredList = shoppingList.filter(function(value) {
  return value !== 'oranges';
});

console.log(filteredList); // Logs ['apples', 'bananas', 'pears']

With the slice() Method

The slice() method returns a shallow copy of a portion of an Array into another Array object. To remove an item from an array, you can use the slice() method to create a new array without the item you want to remove.

A “shallow copy,” in case you’re coming across the term for the first time, is like a child object that has the same references — in other words, it points to the same original elements — as its parent object.

For example:

let shoppingList = ['apples', 'bananas', 'oranges', 'pears'];
let slicedList = shoppingList.slice(0, 2).concat(shoppingList.slice(3));

console.log(slicedList); // Logs ['apples', 'bananas', 'pears']

With the pop() Method

The pop() method removes the last element from an Array and returns that element. To remove a specific item from an Array, you can use a loop to find the index of the item and then use the splice() method to remove it.

Pro tip: This is one of the methods for implementing “Undo” in a web app.

For example:

let shoppingList = ['apples', 'bananas', 'oranges', 'pears'];
let index = shoppingList.indexOf('oranges');
if (index > -1) {
  shoppingList.splice(index, 1);
}

console.log(shoppingList); // Logs ['apples', 'bananas', 'pears']

With the shift() Method

The shift() method removes the first element from an Array and returns that element. To remove a specific item from an Array, you can use a loop to find the index of the item and then use the splice() method to remove it.

For example:

let shoppingList = ['apples', 'bananas', 'oranges', 'pears'];
let index = shoppingList.indexOf('apples');
if (index > -1) {
  shoppingList.splice(index, 1);
}

console.log(shoppingList); // Logs ['bananas', 'oranges', 'pears']

Which Method to Go For

If you already know the index of the element you want to remove, the splice() method is a great option. It allows you to remove one or more elements from the Array and add new elements if needed. However, splice() can be relatively slow and complex to use, so it may not be the best option for large arrays.

If you want to remove elements based on a condition, the filter() method is the best choice. It creates a new Array with all elements that pass the test implemented by the function, which means that the original Array isn’t modified. This method can be a little slower than other options — so it may not be the best choice for performance-critical applications.

The shift() method is the simplest and most performant option for removing the first element from an Array. It removes the first element from the Array, and then returns that element. This method is fast and easy to use, so it’s a fantastic option if you need to remove the first element from an array often.

For removing the last element from an Array, the pop() method is your simplest, most performant option. It removes the last element from the Array and returns that element. This method is fast and easy to use and an excellent choice if you need to remove the last element from an Array frequently.