# How to remove items from an array in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published May 20, 2020. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-array-remove-items

> A complete guide to learn about different ways to remove elements from an array in JavaScript.

Last week, we looked at different ways to [add items to an array](https://attacomsian.com/blog/javascript-array-add-items) 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()](https://attacomsian.com/blog/javascript-arrays#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`):

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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](https://attacomsian.com/blog/javascript-array-find-matching-items) 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:

```javascript
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.

```javascript
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](https://attacomsian.com/blog/javascript-empty-array) from an array, just set the array's `length` property to 0:

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

// empty an array
fruits.length = 0

console.log(fruits); // []
```

Take a look at [this article](https://attacomsian.com/blog/javascript-arrays) to learn more about JavaScript arrays and how to use them to store multiple pieces of information in one single variable.