All the Ways to Remove an Item from an Array
Tags: javascript, webdev, codenewbie, tutorial
Published: 2023-01-13 22:43:35

You might be wondering how can I remove a specific item from an array. In fact, this is a common task in programming, and there are several different ways for it which we'll cover in this article.

> Before we move on, remember you can build your websites, landing pages, APIs, and more, on [DoTenX](https://dotenx.com) for **free**. DoTenX is an alternative for Wordpress (and much more) in 2023!
> 
> Make sure to check it out and use it in your projects. *DoTenX is* ***open-source*** *and you can find the repository here:* [*github.com/dotenx/dotenx*](http://github.com/dotenx/dotenx)[.](http://github.com/dotenx/dotenx.*)

1\. splice
    

I start with the most common way, which is using `splice`. `splice` is a powerful function that you can use to add, remove or replace elements in an array.

```javascript
let students = ['John', 'Mary', 'Mike', 'Jane'];
let index = students.indexOf('Mary');
students.splice(index, 1);
console.log(students); //Outputs: ["John", "Mike", "Jane"]
```

The first element of `splice` is the start index, and the second one is the number of elements to be deleted. Just keep in mind that this method is not an option if you want to keep the original array intact.

2\. filter
    

Another method, that I often use, especially if I want to remove multiple elements based on a condition is by using `filter` method.

```javascript
let students = ['John', 'Mary', 'Mike', 'Jane'];
let filteredStudents = students.filter(student => student !== 'Mary');
console.log(filteredStudents); //Outputs: ["John", "Mike", "Jane"]
```

As you can see this method gives us more flexibility and doesn't alter the original array.

3\. spread operator
    

This is not something you use that often just to remove an element is more used for instance if you want to merge some arrays too.

```javascript
let students = ['John', 'Mary', 'Mike', 'Jane'];
let index = students.indexOf('Mary');
let newStudents = [...students.slice(0,index), ...students.slice(index+1)];
console.log(newStudents); //Outputs: ["John", "Mike", "Jane"]
```

While we're at it, let me show you a simple trick related to this operator and the problem we're trying to solve.

```javascript
let students = ['John', 'Mary', 'Mike', 'Jane'];
let index = students.indexOf('Mary');
let [first, ...rest] = students;
console.log(rest); //Outputs: ["Mary", "Mike", "Jane"]
```

4\. without
    

So far, all the methods were using vanilla JavaScript without any external library. But, this article wouldn't be complete if we don't cover the solutions using the lifesaving `lodash` library.

First, we use the method `without` that creates a new array without the given elements.

```javascript
let students = ['John', 'Mary', 'Mike', 'Jane'];
let newStudents = _.without(students, 'Mary');
console.log(newStudents); //Outputs: ["John", "Mike", "Jane"]
```

5\. pull
    

`pull` method simply removes all the given values from the array. This is less desired compared to `without` as it's not immutable.

```javascript
let students = ['John', 'Mary', 'Mike', 'Jane'];
_.pull(students, 'Mary');
console.log(students); //Outputs: ["John", "Mike", "Jane"]
```

6\. remove
    

I particularly use this method more often as not only it removes all elements from array that predicate returns truthy for, but it also returns an array of removed elements.

```javascript
let students = ['John', 'Mary', 'Mike', 'Jane'];
let removed = _.remove(students, function(student) {
  return student === 'Mary'; // Remove if this is true
});
console.log(removed); //Outputs: ["Mary"]
console.log(students); //Outputs: ["John", "Mike", "Jane"]
```

Can you suggest any other methods?