All the Ways to Remove an Item from an Array

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

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.

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.

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.

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.

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.

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.

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.

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?