There are multiple ways to remove an element from an array in Javascript. We cover all of the methods that can be used in this tutorial.

JavaScript is a flexible programming language that runs just about everywhere. You can run JavaScript apps in web browsers, build command-line apps you can run in the terminal, mobile apps can be built using platforms like Cordova, and server processes can be written on platforms like Node.js. Naturally, Linux is the environment of choice for many JavaScript developers and is perfect for learning tools like Node.js as well as hosting them for end users once completed.

JavaScript Arrays

An array is a type of JavaScript variable that can hold other variables, or references to other variables, in a list at a certain position. Arrays form the backbone of most applications – they might hold to-do list items or a reference to each player on a team in a multiplayer game. Before reading this article I recommend reading our article on checking whether a value exists in an array.

Removing One or More Elements From an Array Using the splice() Method

The following is an array containing a list of colors. We can remove one or more sequential items with the splice() method. The splice method accepts 2 options when deleting – the beginning and ending index (position). If they are the same, a single item will be removed:

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
var removed = colours.splice(3, 3); // Remove item at index 3 
console.log(colours); // Returns ["red", "green", "blue", "orange", "pink"] 
console.log(removed); // Returns ["purple"]

Note that:

• Remember that indexes are counted starting at 0, not 1: so “red” is at index 0, “blue” is at index 3
• We refer to the element and value – the element is the item in the array. It has an index (position) and a value. You can have multiple elements with the same value at different positions
• The console.log() method is used to output the value of the result to the console so that it can be viewed
• We’ve added a comment: text after the // will not be interpreted by JavaScript so that you can leave yourself notes in the code
• splice() has returned an array containing the removed values, which is assigned to the variable called removed
• The colors array no longer contains an element with the value “purple”
• You don’t have to assign the removed values to a variable, you can just call array.splice() without assigning it to anything to simply remove and discard the items
• Watch out! When elements are removed from an array using splice(), the indexes for the remaining elements will change as their positions will have changed!

Removing Multiple Sequential Items with splice()

To remove multiple items, supply a beginning index and an end index:

var colours = ["red", "green", "blue", "purple", "orange", "pink"];
var removed = colours.splice(3, 5);// Remove items at indexes 3 to 5
console.log(colours); // Returns ["red", "green", "blue"]
console.log(removed); // Returns  ["purple", "orange", "pink"]

Removing the Last Element From an Array Using the pop() Method

To remove the last item in an array, call the arrays pop() method. The pop() method will return the removed element so it can be optionally assigned to another variable:

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
var removed = colours.pop(); 
console.log(colours); // Returns ["red", "green", "blue", "purple", "orange"] 
console.log(removed); // Returns "pink"

• Unlike splice(), pop() returns the value of the removed item on its own, not inside an array
• If the array was empty, a value of undefined will be returned by pop() as there was no value removed

Removing the First Element From an Array Using the shift() Method

The shift() method works pretty much the same way as the pop() method, except that it removes and returns the first element of the array:

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
var removed = colours.pop(); 
console.log(colours); // Returns ["green", "blue", "purple", "orange", "pink"]
console.log(removed); // Returns "red"

• Watch out (again)! When an element is removed from an array using shift(), the indexes for the remaining elements will change as their positions will have changed!

Removing Elements From an Array Depending on Their Value Using filter()

If you want to remove items from an array based on a set of conditions, you can use the filter() method. The filter() method accepts a function that will be used to test each item in the array. For example, you may want to remove all odd numbers from an array, or remove all strings over a certain length from an array:

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
colours = colours.filter(word => word.length <= 4); // Removes all strings with more than 4 letters 
console.log(colours); // Returns ["red", "blue", "pink"]

• The filter() method does not update the value of the array, so we reassign the value of the colors array to the result of its filter function with colours = – note that var isn’t used again, because we already defined the variable in the line above – we’re just updating its value.
• word => word.length <= 4 is a (very short) JavaScript function to test whether the word has more than 4 characters. It is passing each array element as a variable called word, and then it is checking whether the length of that string is equal to or less than 4.
• If the element value has 4 or fewer characters, the comparison returns TRUE, and the array element is kept. Otherwise, it is discarded.
  • Watch out (again, again)! When an element is removed from an array using filter(), the indexes for the remaining elements will change as their positions will have changed!

Removing a Single Element From an Array Using delete

If you want to remove an element from an array, but do not want the indexes of other elements to change use the delete JavaScript operator

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
delete colours[3]; 
console.log(colours); // Returns ["red", "green", "purple", "orange", "pink"]

• The returned array above looks the same as if splice() were used, but it is not!
• In the example where splice() was used, the index of the element with value “purple” is 2
• In the above example where delete was used, the index of the element with value “purple” is still 3, as it was in the original array. A gap has been left in the array where the “blue” value was previously

Removing Multiple Values From the End of an Array by Altering its length

A shortcut for removing multiple items from the end of an array is to change the length property of an array:

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
colours.length = 3; 
console.log(colours); // Returns ["red", "green", "blue]

• The array now only contains 3 elements, as its length was set to 3
• These elements are at index 0, 1 and 2 – we set the length using the total count, but indexes still start at 0!

Conclusion

Removing an element from an array is one of the basic JavaScript functions you’ll use day-to-day while developing applications and managing the data that you’re collecting and generating. There are multiple ways of doing so, which one you choose to use will depend on what the resulting array is meant to look like. To learn more about JavaScript arrays and functions, check out other JavaScript articles!