DEV Community

Cover image for All the Ways to Remove an Item from an Array
mohsen
mohsen

Posted on • Originally published at blog.dotenx.com

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

Can you suggest any other methods?

Top comments (8)

Collapse
 
ota200 profile image
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()
Enter fullscreen mode Exit fullscreen mode

This is a very useful article, thanks for sharing!

Collapse
 
mohsenkamrani profile image
mohsen

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

Collapse
 
bretbernhoft profile image
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.

Collapse
 
mohsenkamrani profile image
mohsen

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

Collapse
 
bcostaaa01 profile image
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”
Enter fullscreen mode Exit fullscreen mode
  • 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.

Collapse
 
mohsenkamrani profile image
mohsen

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

Collapse
 
bcostaaa01 profile image
Bruno • Edited

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 :)

Thread Thread
 
mohsenkamrani profile image
mohsen • Edited

Fair point :) Thanks for sharing it.