JavaScript: Remove Element from an Array

how-to

Our experts take readers step-by-step through a variety of hosting and programming tasks in our popular series of "How-To" guides.

Removing elements from a JavaScript array is a common programming paradigm that developers often run into. As with a lot of things JavaScript, this isn’t as simple as it probably should be.

There are actually several ways to remove one or more elements from an array — without ripping your hair out in the process — so let’s go through each of them one by one.

Removing One Element Using splice()

The splice() method is a versatile way of removing, replacing, and/or adding elements in an array. It works similarly to splice() functions in other languages. Basically, you take an array and selectively remove portions of it (aka “splice”). The inputs to the splice() function are the index point to start at and the number of elements to remove.

Also, remember that arrays are zero-indexed in JavaScript.

To remove one element from a specific index in an array:

1

2

3

4

5

6

7

8

9

["bar","baz","foo","qux"]

list.splice(2,1)

// Starting at index position 2, remove one element

["bar","baz","qux"]

list.splice(2,2)

// Starting at index position 2, remove two elements

["bar","baz"]

The splice() call will return any removed elements, so you know what was actually removed.

Removing a Range of Elements Using splice()

Just to make sure you didn’t miss it in the previous example, it is worth calling out specifically that you can remove several consecutive elements with splice().

To remove several consecutive elements from an array:

1

2

3

4

5

["bar","baz","foo","qux"]

list.splice(0,2)

// Starting at index position 0, remove two elements

["foo","qux"]

Removing One Element Using pop()

The array methods push() and pop() work on the the end of an array. The terms push() and pop() come from the idea of a stack in memory from the early days of microprocessors. This implements the idea of a Last-In-First-Out data structure (LIFO). The push() method will ADD an element to the array and the pop() method will remove one.

To remove the last element of an array:

1

2

3

4

["bar","baz","foo","qux"]

list.pop()

["bar","baz","foo"]

Removing One Element Using shift()

The array methods shift() and unshift() work on the beginning of an array instead of the end of an array, as is the case with push() and pop(). The shift() command will remove the first element of the array and the unshift() command will add an element to the beginning of the array.

To remove the first element of an array:

1

2

3

4

["bar","baz","foo","qux"]

list.shift()

["baz","foo","qux"]

Searching and Removing a Specific Element by Value

The indexOf() command returns the first index at which a given element can be found in the array, or -1 if it is not present. This can be used along with splice() to search for an element and then remove it, even if you don’t know where it is in the array.

Let’s remove the “foo” element:

1

2

3

4

["bar","baz","foo","qux"]

list.splice(list.indexOf('foo'),1);

// Find the index position of "foo," then remove one element from that position

Removing Multiple Specific Elements

Let’s add an extra “foo” element to our array, and then remove all occurrences of “foo”:

1

2

3

4

5

6

7

["bar","baz","foo","foo","qux"]

for(vari=list.length-1;i--;){

if(list[i]==='foo')list.splice(i,1);

}

["bar","baz","qux"]

Note that we could also have used the filter()method for this operation, but that would have created a new array, as filter() does not mutate the array on which it is called.

If you need to do a lot of filtering, using the filter() method might clean up your code quite a bit.

Conclusion

When it comes down to it, removing elements from arrays in JavaScript is pretty straightforward. The naming conventions may be a bit odd at first, but once you do it a few times, you will be able to do it without a second thought (or a second look at this article).

Questions or Comments? Ask Alexandra!

Ask a question and Alexandra will respond to you. We strive to provide the best advice on the net and we are here to help you in any way we can.

Was this helpful? Tell Us Thanks.

Like this article on Facebook

Tweet this article on Twitter

Share this article on Google+

About the Author

Alexandra Leslie

Alexandra Leslie serves as Tech Vertical Manager of Digital Brands Inc, spearheading the charge to deliver technical expertise and thought leadership to our rapidly growing audience of developers, engineers, and website owners here at HostingAdvice. You'll find her engaging with leaders in web hosting and tangentially related industries, enjoying honest discussions of their cutting-edge technologies. She loves getting her hands dirty with comprehensive reviews of popular hosting platforms and services, and she's a die-hard WordPress fan. Alexandra leads the HostingAdvice team with a passion for translating technical jargon into digestible action items anyone can use to build, monetize, and scale a web presence.

Disclaimer: Great efforts are made to maintain reliable data on all offers presented. However, this data is provided without warranty. Users should always check the offer provider’s official website for current terms and details. Our site receives compensation from many of the offers listed on the site. Along with key review factors, this compensation may impact how and where products appear across the site (including, for example, the order in which they appear). Our site does not include the entire universe of available offers. Editorial opinions expressed on the site are strictly our own and are not provided, endorsed, or approved by advertisers.