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?

Comments

[O.T.A]

I never new there was this much ways, as a mainly a python dev all I think we have is

.pop()
.remove()

This is a very useful article, thanks for sharing!

[Sam]

I'm glad you find this helpful. Yea, plenty of ways for this in JS.

[Bret Bernhoft]

Thank you for taking the time to layout all of these routes for removing an item from an array. I wasn't expecting the Lodash references, but those were a good refresher as well.

[Sam]

I'm glad you find it helpful. Yup, sometimes Lodash offers to many options to remember all.

[Bruno]

You can use forEach() as follows:

let myArray = [“John”, “Mary”, “Mike”, “Jane”];
let itemToRemove = myArray[3];

let newArray = myArray.forEach(function(element, index) {
  if (element === itemToRemove) {
    myArray.splice(index, 1);
  }
});

console.log(myArray); // “John” “Mary” “Mike”

• create an array myArray with 4 items
• create a variable itemToRemove which gets the value of the last item in the array (“Jane”)
• Array.prototype.forEach() iterates over myArray and checks if the current element is equal to the value of itemToRemove
• if an element matches the value of itemToRemove (“Jane”)
• splice() removes the array in place and takes two arguments: the index of the element to remove and the number of items to be removed (in this case, 1)
• the result in the log is [“John”, “Mary”, “Mike”]

newArray is not used, because forEach() doesn’t return a new array, it rather modifies the original array. If no element matches the value of itemToRemove, myArray is not modified.

[Sam]

Well, interesting approach! I'm afraid it's not very efficient.

[Bruno]

I agree with you in a way. The approaches you mentioned are by far the most efficient, I think, but since you asked for others’ suggestions, I thought about this one :)

[Sam]

Fair point :) Thanks for sharing it.