How to remove items from an array in JavaScript

How to remove items from an array in JavaScript

Last week, we looked at different ways to add items to an array in JavaScript. Today, you'll learn how to remove single as well as multiple elements from an array in JavaScript.

JavaScript provides many ways to remove elements from an array. You can remove an item:

• By its numeric index.
• By its value.
• From the beginning and end of the array.

Removing an element by index

If you already know the array element index, just use the Array.splice() method to remove it from the array. This method modifies the original array by removing or replacing existing elements and returns the removed elements if any.

Let us say you got the following array, and you want to remove the element at index 2 (Cherry):

const fruits = ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana'];

const removed = fruits.splice(2, 1);

console.log(fruits); // ['Apple', 'Orange', 'Mango', 'Banana']
console.log(removed); // ['Cherry']

Want to remove more than one items? Just pass the count to Array.splice() like below:

const fruits = ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana'];

const removed = fruits.splice(2, 2);

console.log(fruits); // ['Apple', 'Orange', 'Banana']
console.log(removed); // ['Cherry', 'Mango']

The second argument of Array.splice() is the number of elements to remove. Remember that Array.splice() modifies the array in place and returns a new array containing the elements that have been removed.

Removing an element by value

If you know the element value, first use the Array.indexOf() method to find the index of the element in the array and then use Array.splice() to remove it.

Here is an example:

const fruits = ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana'];

const index = fruits.indexOf('Mango');

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

console.log(fruits); // ['Apple', 'Orange', 'Cherry', 'Banana']

Note that the Array.indexOf() method returns the index of the first matching element. If the array contains multiple elements with the same values, only the first element will be removed.

To filter out all elements with the same value from an array, use the Array.filter() method instead:

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

const filtered = fruits.filter(fruit => fruit !== 'Mango');

console.log(filtered); // ['Apple', 'Cherry', 'Banana']

The Array.filter() method creates a new array populated with all array elements that pass a certain condition. This method doesn't modify the original array. Take a look at this article to learn more about the Array.filter() method.

Removing an element from the end of an array

The Array.pop() method can be used to remove an element from the end of an array. This method removes the last element and returns it:

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

const elem = fruits.pop();

console.log(fruits); // ['Apple', 'Mango', 'Cherry', 'Mango']
console.log(elem); // Banana

Removing an element from the beginning of an array

The Array.shift() method works exactly like Array.pop() except that it removes an element from the start of the array. All other elements are shifted to a lower index.

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

const elem = fruits.shift();

console.log(fruits); // ['Mango', 'Cherry', 'Mango', 'Banana']
console.log(elem); // Apple

Removing all elements from an array

To remove all elements from an array, just set the array's length property to 0:

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

// empty an array
fruits.length = 0

console.log(fruits); // []

Take a look at this article to learn more about JavaScript arrays and how to use them to store multiple pieces of information in one single variable.

const fruits = ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana'];

const removed = fruits.splice(2, 1);

console.log(fruits); // ['Apple', 'Orange', 'Mango', 'Banana']
console.log(removed); // ['Cherry']

const fruits = ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana'];

const removed = fruits.splice(2, 2);

console.log(fruits); // ['Apple', 'Orange', 'Banana']
console.log(removed); // ['Cherry', 'Mango']

const fruits = ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana'];

const index = fruits.indexOf('Mango');

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

console.log(fruits); // ['Apple', 'Orange', 'Cherry', 'Banana']

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

const filtered = fruits.filter(fruit => fruit !== 'Mango');

console.log(filtered); // ['Apple', 'Cherry', 'Banana']

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

const elem = fruits.pop();

console.log(fruits); // ['Apple', 'Mango', 'Cherry', 'Mango']
console.log(elem); // Banana

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

const elem = fruits.shift();

console.log(fruits); // ['Mango', 'Cherry', 'Mango', 'Banana']
console.log(elem); // Apple

const fruits = ['Apple', 'Mango', 'Cherry', 'Mango', 'Banana'];

// empty an array
fruits.length = 0

console.log(fruits); // []

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript