How to remove element from array js

JavaScript: How to Remove a Specific Element from Array

Artturi Jalli

To remove a specific element from an array in JavaScript:

However, this only removes the first occurrence of the specific element!

To remove all occurrences of the specific element, you need to use a loop.

For example, let’s remove all 3s from an array of numbers:

And yes, this is the easiest way to accomplish the task. There is no Array.remove() function in JavaScript one would assume.

Next, let’s take a look at how you can make this task easier and less repetitive. Then let’s also see a more advanced example in the end.

Table of Contents

How to Make It Easier

One way you could make removing elements from array easier is by storing the above approaches to separate functions:

Now you can use these functions in your project so you do not need to repeat the loop over and over.

Now that you understand how to remove elements from an array in JavaScript, let’s take a look at an alternative approach.

The filter() Function

One way to remove specific elements from an array in JavaScript is by using the filter() function.

The filter() returns a new array with the filtered elements only.

The filter() function works such that it loops through the array of elements checks if each element satisfies a condition. This condition is implemented as a function that the filter() function calls for each element one by one. If a condition is met, the element is added to the result array.

Here is an illustration:

Let’s implement the filter() that is illustrated above:

Of course, you do not have to deal with numbers only.

The filter() function can be applied to easily remove objects from an array based on a criterion.

How to Remove a Specific Object from an Array in JavaScript

To remove a specific object from an array in JavaScript, use the filter() function.

For instance, let’s say we have a line of people objects and we want to remove all persons that are under 18 years old:

This piece of code works such that the filter() function:

Remove Elements from the End of an Array

To remove elements from the end of an array in JavaScript, you can set the length of the array to be less than the current length. This means you make the array shorter than it was originally by setting changing its length.

To remove the last element from an array, you can also use the Array.pop() method.

Remove Elements from the Beginning of an Array

To remove the very first element of an array in JavaScript, use the Array.shift() method.

If there are no elements in the array, the Array.shift() method returns undefined.

For example, let’s remove the first number in the array of numbers:

Remove a Range of Elements Using Array.splice()

Earlier in this guide, you learned how to use Array.splice() to remove a single element.

However, sometimes you do not just want to remove a single item. Instead, you want to remove a range of consecutive items in an arbitrary position in the array.

To remove a range of elements from a JavaScript array, use the Array.splice() method.

The Array.splice() method takes two arguments:

This method returns the removed elements as an array.

For example, let’s remove the 3 letters in the middle:

Remove Elements from an Array Using the ‘delete’ Operator

You can also use the built-in delete operator to get rid of the element of an array.

This assumes you know the index of the specific element you want to remove from the array.

However, notice that this does not change the size of the original array.

Instead of completely removing the element, the delete operator marks the element undefined.

The delete operator works such that it removes a property from an object. If there are no more references to the property, it is automatically released from the memory.

The delete operator returns true if the deletion was successful and false if not.

Unlike you might imagine, the delete operator does not directly free up memory. Instead, memory management happens when the references are broken.

For instance, let’s remove the first letter from an array of characters:

As you can see, the size of the array remains the same. Now the first element is just an empty, undefined element.

Clear a JavaScript Array

To remove all the elements of a JavaScript array, there is a couple of methods you can do it.

Let’s quickly go through these options one by one.

Perhaps the easiest way is to set the array equal to an empty array.

However, this can be problematic.

If you have references to this array, they are not going to change. Instead, the references still have the original elements of the array.

If you are not careful this can cause a lot of headaches.

Let’s see an example:

As you can see, even though letters2 is set equal to letters1, the letters2 array remains unchanged after removing the elements from the letters1 array.

To overcome this issue, you need to modify the original array instead of assigning a new array to one of the arrays.

One way to do it is by setting the length of the original array to 0.

For instance, let’s set the length of letters1 to 0. This shrinks the array to contain 0 elements. Because the letters2 array points to this same array in memory, it also changes.

Anyway, the only way to clean the array and all the arrays that reference the original array is by directly modifying the original array.

As you learned earlier, you can modify the original array by removing elements with the Array.splice() method as well.

So you could just as well remove all the elements of the array with the splice() method:

Of course, you could also use the Array.pop() method until the length of the array reaches 0.

As you learned earlier, the pop() method also modifies the original array, so both of the arrays are updated.

Conclusion

Today you learned what it takes to remove a specific element in an array in JavaScript.

To recap, there is no such method as array.remove(), so you have to implement one yourself.

To remove one specific element from an array:

To remove all specific elements from an array:

Alternatively, you can use the filter() function to remove one/all specific elements from an array in JavaScript.

Removing Items from an Array in JavaScript

Learn JavaScript the right way.

Skyrocket your JavaScript skills to the top.
Join 78,561 developers pushing their limits.

with Todd Motto

JavaScript HTML5 APIs

JavaScript Testing with Jest

In this article, we’ll explore a few different ways to remove an item from an array in JavaScript. I will also show you mutable and immutable operations so you know how your code will affect your data structures and references.

Table of contents

Understanding Array indexes

In JavaScript, an array is a special kind of object.

This array object has several different properties, some of which are inherited properties that exist on the prototype, and some are properties that the array object exposes to us when we “add” things to an array.

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

That went smoothly, check your email.

With arrays this means when we need access to a value, whatever it may be (a primitive/object), it’s done via an “index lookup”. Ask for the index from your array and you’ll get back the item located at that index.

Really, you can think of each index as a drawer in a filing cabinet. Each draw contains something unique! Arrays are virtual, so the size of the filing cabinet is up to you!

“Why are you telling me all this, Todd?”

Because now you understand an array, you know how to work with one!

Without further ado, let’s first explore how to remove an item from an array in JavaScript by index and value.

Splice is a mutable method that allows you to change the contents of an array. This could be removing or replacing “elements”, as array items are known.

Let’s take an array with a few string values:

To remove an item via its index, we need to find the index.

There are two scenarios here, 1) we know the index and 2) we don’t know the index but know the value.

We could use Array.prototype.indexOf() to obtain the, well… “index of” the element:

Try the code example for this below:

So now we understand a little more about mutable and immutable, let’s uncover the immutable pattern to “remove” an element from an array.

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

That went smoothly, check your email.

That last reference to your array will then only live on, and we won’t be mutating the original array. We’ll get back a fresh copy each time with our modifications!

So, let’s take the same array to start with:

In this example, we are removing items from the initial array by returning a new array of just the items we do want, using drinks[i] allows us to look at and compare the array element’s value (such as ‘Coffee’ as a String in this case):

Using filteredDrinks would then give us the items we’d like. You can see how by learning the principles of programming we can apply different patterns and have deeper understandings of what we’re doing!

This next method I’ve included for clarity on what NOT to do when removing items from an array in JavaScript, even though it’s perfectly “valid”…

Avoiding the “delete” keyword

Here’s an example that you might see around the web:

You’ll notice from the console.log output above that it completely blows away the key. I included this for clarity, it’s always great to see and understand what side effects your operations have.

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

That went smoothly, check your email.

Learn JavaScript the right way.

Skyrocket your JavaScript skills to the top.
Join 78,561 developers pushing their limits.

with Todd Motto

JavaScript HTML5 APIs

JavaScript Testing with Jest

Related blogs 🚀

Create a Group By Function with Array.prototype.reduce

Learn how to write a custom group by function in JavaScript by using Array.prototype.reduce.

Group Array of Objects with Array.prototype.group

In this post you’re going to learn how to group an array of objects with the upcoming Array.prototype.group method.

Active States with Drag Enter and Leave Events in JavaScript

So you’re diving into the world of Drag & Drop APIs in JavaScript, but now it’s time to make things a little more functional for the end user.

Feature Detect the HTML5 JavaScript Drag & Drop API

Detecting Dark Mode in JavaScript

Detect Dark Mode in JavaScript and learn how to watch for changes, so you can update your styles accordingly.

MODERN METHODS TO REMOVE ITEMS FROM ARRAYS IN JAVASCRIPT

Table of Contents

1. Arrays In JavaScript

Arrays in JavaScript are special objects that store items sequentially, that is, they store items one after another in memory. They are high-level, list-like objects. You can actually think of them as lists of items.

All items in an array have an index which indicates the position of that item in the array. The item in the first position has an index of 0 then next has an index of 1 etc. For this reason, JavaScript’s array indexes are zero-based.
Items in JavaScript arrays can be accessed using their index.
We can find the index of an item in an array using a special method called the indexOf.

You can simply think of JavaScript arrays as an ordered set of values that you refer to with a name and an index

The total number of items in an array is the length of that array.
The length property is special. It always returns the index of the last element plus one.

JavaScript arrays are the most used data structure and because they organize items sequentially, it is super easy to access the first and last item. Hence deleting these items are very easy in JavaScript.

2. Array.prototype.shift()

The shift() method removes the first element in an array (that is the item at the index of zero). It also re-orders the remaining elements in the array and decrements the array length by one. Finally, it returns the removed item.

3. Array.prototype.pop()

The pop() method is the opposite of the shift(). It removes the last element of the array.
The index of the last element in the array is the length of the array minus one. The pop() method, also decrements the array length by one and returns the removed element.

4. The Delete Operator

Both the pop() and the shift() methods give us a way to remove elements from an array from pre-set position viz: the last or first positions respectively. While they are great, we do not get the freedom of deleting elements from any other position. What if we want to delete elements at a certain index which is neither the first nor the last?

The delete operator is great for this.
Unlike pop() and shift() the delete operator returns the new array.

One thing that must be noted before one should use the delete method is that it does not change the length of the array as seen above. It removes the specified element and adds undefined in its place.

5. Array.prototype.splice()

If the delete operator is not very suitable for you because it does not update the array length, another built-in array method you can use is the splice() method.

The splice() method is a very powerful built-in array method that can be used to remove array elements at any index. It can also be used to add elements or replace an existing element. But we will just stick to removing elements from an array. It can remove multiple elements from an array unlike pop() and shift() that removes one element at a time.
Lastly the splice() method returns a new array containing the deleted element/elements.

The splice() method can take up to three parameters for our use case it needs only two. The first specifies the index to start deleting from the second specifies how many elements to remove from the array

6. Array.prototype.filter()

We saw the power of splice() above as we used it to elements from any index in an array. But with splice() we could only delete multiple elements in series.

What if we want to delete all the words from our numList array above? since the words are not in series in the above array splice() is not the best fit. Except we are implementing our own remove() method where we can use it under the hood. A good option is to use the filter() since we are deleting all instance of a string in the array.

The filter() methods calls a provided callback function once for each element in an array and returns a new array of elements that passes the test implemented in the callback function.

Noticed the power of the filter() method, how it allows us to remove multiple elements from an array regardless of their index. Also, notice how we can combine conditions in the callback function implementation to target multiple elements.

A Masterpiece

There are still other ways to do this in JavaScript, truly at this point, it should boil down to a developer’s implementation of his own custom function. Maybe you dream of a remove() method of your own. I will leave you with a masterpiece from John Resig. (The creator of jQuery).

8. Closing Thoughts

These are a nice collection of ways to remove items from an array but it is by no means an exhaustive list. As I said developers can always come up with something novel. If you do have a custom helper function to achieve this task, you are more than welcome to share it in the comment section below.

Remove Element from an Array in JavaScript

In JavaScript, and just like many other languages out there, at some point you’ll likely need to remove an element from an array. Depending on your use-case this could be as easy as using the built-in shift() or pop() commands, but that only works if the element is at the beginning or end of the array, respectively. Many use-cases will require you to support removing an element from an arbitrary location in the array, which is what we’ll cover here.

I’ll also be explaining how to achieve this in other ways, like with the use of utility libraries that will handle it for you, or if you have to support older browsers like IE 8.

Vanilla JavaScript

To remove a particular element from an array in JavaScript we’ll want to first find the location of the element and then remove it.

Using this index value we will then want to actually remove the element, which we can do with the splice() method.

Keep in mind that this only removes the first occurrence of the given element. See the following example to illustrate this:

Notice that the second ‘3’ is still present.

If we want to remove every instance of the specified element, then we can achieve this with a while-loop instead of the if-statement:

Now running the same example code as above, we get the following:

As you can see, both of the ‘3’ elements are now removed from the array.

Libraries

With this being such a common use-case, most (if not all) of the utility libraries have a function to remove elements from an array.

Lodash

To remove an element, Lodash has the remove() method. If you have a pretty simple use-case you’re just wanting to remove a primitive element (like a number), then this function is probably overkill for you since you need to pass a function that determines if the element matches your criteria.

So, for example, here is how you’d remove the number 3:

Notice that it has removed all instances of 3, which is the default behavior.

However, this method is more useful when removing more complex elements, like objects. For example, maybe you want to remove all «people» objects from an array if they are under 21 years old:

It works a bit like the filter method, except that it removes the elements from the array you pass and then returns an array of the removed elements from the method itself.

Underscore

See the following code for an example:

Free eBook: Git Essentials

Check out our hands-on, practical guide to learning Git, with best-practices, industry-accepted standards, and included cheat sheet. Stop Googling Git commands and actually learn it!

Again, just like Lodash’s remove method, the reject method is best suited for more complex cases, like removing objects or groups of elements.

Supporting Internet Explorer

If you’re project requires you to support old versions of Internet Explorer, specifically IE 8 in this case, then the indexOf() method will not work for you since it isn’t supported in this version of IE.

To deal with this, one solution is to shim the method, as shown in this Stack Overflow answer:

According to the SO post, this is the implementation of indexOf from MDN, used in Firefox/SpiderMonkey.

Clean way to remove element from javascript array (with jQuery, coffeescript)

There are many questions about this, not least: jQuery version of array contains, a solution with the splice method and many more. However, they all seem complicated and annoying.

With the combined powers of javascript, jQuery and coffeescript, what is the very cleanest way to remove an element from a javascript array? We don’t know the index in advance. In code:

Failing a good built-in method, what is a clean way of extending javascript arrays to support such a method? If it helps, I’m really using arrays as sets. Solutions will ideally work nicely in coffeescript with jQuery support. Also, I couldn’t care less about speed, but instead prioritize clear, simple code.

8 Answers 8

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

And if you want to remove all matching elements, and return a new array, using CoffeeScript and jQuery:

which translates into:

Or doing the same without jQuery’s grep:

which translates to:

Using vanilla Javascript:

This is really easy with jQuery:

This seems pretty clean and understandable; unlike other answers, it takes into account the possibility of an element showing up more than once.

if you are also using CoffeeScript creator’s underscore.js library, here’s a one-liner that will work nicely:

Although you are asking for a clean approach using Coffeescript or jQuery, I find the cleanest approach is using the vanilla javascript method filter:

It looks cleaner in coffeescript but this translates to the exact same javascript, so I only consider it a visual difference, and not an advanced feature of coffeescript:

Filter is not supported in legacy browsers, but Mozilla provides a polyfill that adheres to the ECMA standard. I think this is a perfectly safe approach because you are only bringing old browsers to modern standards, and you are not inventing any new functionality in your polyfill.

Sorry if you were specifically looking for a jQuery or Coffeescript only method, but I think you were mainly asking for a library method because you were unaware of a clean javascript only method.