How To Remove Element From Array In JavaScript?

javascript remove element from array

Arrays are a vital part of any JavaScript developer's life as it allows you to use store multiple values in a single object.

Sadly though, JavaScript doesn't offer any easy way to take elements out of an array. While there are easy functions such as concat() to combine arrays, there's no straightforward array.remove() tool.

Fortunately, there are plenty of methods you can use to make JavaScript remove element from array.

In this guide, I'll run through the seven simplest ways to remove JavaScript element from array, and give you examples of the code you will need to use:

  • Step 1 - Remove specific elements with the 'Splice' function
  • Step 2 - Remove elements from the end of a JavaScript array with pop()
  • Step 3 - Remove elements from the start of a JavaScript array with shift()
  • Step 4 - Use the 'Delete' function to remove individual array objects
  • Step 5 - Find and remove an element of a specific value
  • Step 6 - Find and remove multiple elements with the same value
  • Step 7 - Remove elements by filtering an array

Step 1: Remove Array Elements With the 'Splice' Function

Using 'Splice' is the most versatile way to remove an individual element from an array. It can be used to remove elements from any position in an array. Also, you can also use it to add elements back into the array.

The Splice function takes four arguments:

  1. Location within the array to begin removing elements
  2. How many elements to remove
  3. Method to add elements (optional)
  4. Alternative method to add elements

Here's an example of how to use the 'Splice' function. Say we have an array of different fruits, but we want to remove the individual element "orange":

var fruits = ["apple", "orange", "banana"]

var removed = array.splice(1,1)
/*
removed === ["orange"]
fruits === ["apple", "orange", "banana"]
*/

You'll notice that the 'Splice' function actually returns two arrays, the original array (which is now missing the removed element), and an array containing just the elements that have been removed.

Using Splice to remove multiple elements is just as easy.

In this example, I'll use 'Splice' to remove multiple elements from one array:

var fruits = ["apple", "orange", "banana", "pear", "kiwi", "melon", "blueberry"]

var removed = array.splice(2,3)
/*
removed === ["banana",  "pear",  "kiwi"]
fruits = ["apple", "orange", "melon", "blueberry"]
*/ 

Step 2: Remove Elements from the End of JavaScript Array With pop()

The issue with using the Splice command is that you need to know the index position of each of the elements you want to remove.

If you want to remove the last element of your array, 'Pop' will be a more suitable function. It's also simpler, as you won't need to adapt your code for arrays of different lengths.

The 'Pop' function works similarly to the Push function which, JavaScript experts will know, adds an element to the end of an array.

Using 'Pop' is very straightforward:

["apple", "orange", "banana"]

list.pop()
["apple", "orange"]

'Pop' can remove a single element from the end of your array.

However, if you want to remove multiple elements from the end of a JavaScript array, don't use it. Simply set the array's length property lower than its current value. Any elements that come after the position you set will be removed:

var fruits = ["apple", "orange", "banana", "pear", "kiwi", "melon", "blueberry"]
	
fruits.length = 3
// every element with an index above 2 will be removed
console.log(fruits); // ["apple", "orange", "banana"]

Step 3: Remove Elements from the Beginning of JavaScript Array with shift()

Of course, you also might want to make JS remove an element from the array at the beginning, rather than the end, of the array. In that case, you can use the 'Shift' function, which basically works identically to pop(). 

This is how the 'Shift' function will operate when applied to our favorite fruit list:

["apple", "orange", "banana"]

list.shift()
["orange", "banana"]

Note there isn't a simple way to use the length property remove multiple elements from the start of your array as you can do for elements at the end.

If that's what you need to do, I recommend you use a second variable to swap the order of your elements, then apply the length reduction described in method two, and finally swap the array element order back again.

4. Use the 'Delete' Function to Remove Individual Array Objects

Using the 'Delete' operator isn't appropriate for most arrays. Unlike the methods described above, which will actually shrink the array length once the element has been removed, delete() will simply register the removed elemenas 'undefined'. That means the indexes of the remaining elements won't be affected.

But why does it do that?

Because the 'Delete' function is designed to free up system memory rather than to adjust array sizes. JavaScript is set up to not waste resources on undefined elements, so the 'Delete' function doesn't bother to do anything else. 

Still, if you want to remove an object from array in JavaScript and then add a replacement value later, delete() will meet your needs.

You can apply it like this:

fruits = ["apple", "orange", "banana"]
	
delete fruits[1];
console.log( fruits ); // ["apples", undefined, "banana"] 

Step 5: Find and Remove Element of a Specific Value

Experienced JS developers will already have realized that, if you want to remove an element of a specific value, you can easily add an additional line of code to find the index of the element and then plug the result into any of the functions above.

However, to remove a single element of a given value efficiently, I recommend you combine the index search and element removal commands into a single line of JavaScript code. To do this, you can call a search on your array for a preset value within the Splice function.

For example, if you want to remove "kiwi" from my fruit list, but you don't know where it appears within the array, you can do the following:

["apple", "banana", "pear", "kiwi", "melon", "blueberry"]
	
list.splice (list.indexOf("kiwi"), 1);
// Search for position of kiwi, and remove a single element when it appears
["apple", "banana", "pear", "melon", "blueberry"]

Once again, you'll notice that by using the 'Splice' function we have actually changed the indexing and length of the list, rather than merely turning all "kiwi" values into undefined variables.

Step 6: Find and Remove Multiple Elements with the Same Value

Note that the above method only works to remove a single instance of the specified value. If you want to get rid of multiple elements of the same value (with the indexOf() and splice() commands), you'll need to use an 'if' loop.

If there are multiple kiwis to take out of my fruits list, I would use the following code:

["apple", "kiwi", "banana", "pear", "kiwi", "melon", "blueberry"]
	
for (var j = list.length-1; j--;) //iteratively checks every variable in the list
{
if (list(j) === 'kiwi')
list.splice( j ,1) //wherever kiwi appears, delete a single element
}
["apple", "banana", "pear", "melon", "blueberry"]

Step 7: Remove Elements by Filtering an Array

Unlike the 'Pop', 'Shift' and 'Splice' functions, the 'Filter' function works by creating a new array, rather than modifying the existing one. That's useful if you want to keep your old array values for later comparison.

So if, as above, I wanted to remove all kiwis from my array, but this time to also turn the modified list into a new variable, I would do the following:

var fruits = ["apple", "kiwi", "banana", "pear", "kiwi", "melon", "blueberry"]

var fruitsfiltered = fruits.filter(function(fruit)  
//calls the filter function on the array
{
return fruit !== "kiwi"
 //return any fruit that isn't a kiwi
});
// fruits = ["apple", "kiwi", "banana", "pear", "kiwi", "melon", "blueberry"]
// fruitsfiltered = ["apple", "banana", "pear", "melon", "blueberry"]

One Last Tip: Don't Forget About Zero-Indexing

No matter which method you use to remove an element from your JavaScript array, it's important to remember that all JavaScript arrays are zero-indexed.

So, for example, if you construct the following array:

array = ["apple", "orange", "banana"]

Then apple will be assigned 0 as an index, orange will get 1, and banana will be 2. It's key to bear this slightly unusual indexing system in mind whenever you're trying to remove an element with the 'Split' function unless you're automatically determining the position of the element as demonstrated in method five.

Have you found an alternative method to remove an element from an array in Javascript? If so, drop me a comment below!

Paul joined the Hosting.Review team right from the start as a content writer and marketer. He was the person responsible for establishing a trademark for in-depth web hosting evaluation and superb review articles. Before joining Hosting.Review, Paul was working on various projects as a freelancer. Paul spends his free time reading fantasy books and graphic novels.
Leave a Comment

  1. Anonymous picture Anonymous
    2019 April 17th
    Reply

    The “fruits” output from your first splice example is wrong. It should be missing “orange”.

  2. Eric picture Eric
    2019 March 16th
    Reply

    Hi Paul!
    Great post! I think it is very helpful especially for those that are new to programming. Do you have any posts with details regarding how reference variables work in JavaScript? I found a decent reference here, https://systemoutofmemory.com/blogs/the-programmer-blog/javascript-remove-element-from-array. But even that post is a bit lacking when it comes to a detailed explanation.

    Cool blog and keep up the good work!

    – Eric

Get new blog posts by email: