Removing Elements From An Array In JavaScript

Most often then not there is a need for manipulating an array which arises from nowhere. There are various methods for such manipulations, one of which includes the method for removing an element. In this article, I will be walking you through various methods for removing elements from an array in JavaScript. Following are the pointers this article will focus on,

• Pop Method
• Shift Method
• Splice Method
• Splice For Range Of Elements
• Remove Elements By Value
• Remove range Of Elements By Value
• Array Filter Method

Let us get started then,

Removing elements from an array in JavaScript

Pop Method

The pop() method removes the element from the end of an array, much like a stack. The push() method, on the other hand, adds an element to the end of an array. The methods implement the concept of LIFO (Last-In-First-Out). Check out this full stack development course to learn more about Javascript.

["Rock", "Metal", "Blues", "Jazz"]
list.pop()
["Rock", "Metal", "Blues"]

The code removes the last element in the array i.e. “Jazz”. The push() method appends the element back to the array.

Shift Method: Removing Elements From An Array In JavaScript 

The shift() method removes the element from the beginning of an array. The unshift() method, on the other hand, adds the element back to the beginning of the array.

["Rock", "Metal", "Blues", "Jazz"]
list.shift()
["Metal", "Blues", "Jazz"]

The code removes the first element i.e. Rock from the array. On using the unshift() method, “Rock” will be added back to the array.

Join our UX Design Course and become a design superstar.

Splice Method

The splice() method removes a particular or a selective part of the array. It proves to be resourceful method of removing, replacing or adding elements to the array.

["Rock", "Metal", "Blues", "Jazz"]
list.splice(2, 1)
// Starting at index position 2, remove one element
["Rock", "Metal", "Jazz"]
list.splice(2,2)
// Starting at index position 2, remove two elements
["Rock", "Metal"]

In the above example, the slice method removes the elements according to the index specified. 

“Blues” is removed from the first example as it is placed at index 2. 

In the second example, two elements i.e. “Blues” and “Jazz” are removed, as the index specifies that 2 elements must be removed, starting at index 2. 

It must be noted that arrays are zero-indexed in JavaScript.

Moving further with, this article on Removing Elements From An Array In JavaScript,

Splice For Range Of Elements

It is plausible to remove consecutive elements by using the splice() method:

["Rock", "Metal", "Blues", "Jazz"]
list.splice(0, 2)
// Starting at index position 0, remove two elements
["Blues", "Jazz"]

The code removes the values mentioned in the splice method.

Remove Elements By Value: Removing Elements From An Array In JavaScript, 

We can search for an element using splice(), and remove it consecutively. This method can be paired with the indexOf() command, which returns the first index at which a given element can be found. If the element is not found, it returns -1 as the output.

In the following example, we remove the element “Blues”:

["Rock", "Metal", "Blues", "Jazz"]
// Find the index position of "Blues," and remove one element from that position
list.splice( list.indexOf('Blues'), 1 );

The code removes the element “Blues”, after finding out the index position of the element.

Remove Range Of Elements By Value

JavaScript allows us to remove multiple elements from the array.

["Rock", "Metal", "Blues”, “Blues", "Jazz"]
for( var i = list.length-1; i--;){
if ( list[i] === 'Blues') list.splice(i, 1);
}
["Rock", "Metal", "Jazz"]

The code removes all occurrences of the element “Blues”.

Let us start with final bit of this article on Removing Elements From An Array In JavaScript,

Array Filter Method

Instead of mutating the array on which it was called, filter() creates a new array.It has a single parameter, known as the callback method. The callback method is triggered when the filter method iterates over the elements of the array.

It passes three values to the callback:

• The current value
• The current array index
• The full array

It returns two values: true or false. Elements that return true are added to the new array created by the filter().

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var filtered = array.filter(function(value, index, arr){
return value > 4;
});
//filtered => [5,6, 7, 8, 9]

The filtered array consists of the elements which prove to be true.

Removing elements from an array can be a bit tedious in nature, but in fact, these methods are the most efficient and resourceful.

With this we come to the end of this blog on ‘Removing Elements From An Array In JavaScript’. I hope you found this informative and helpful, stay tuned for more tutorials on similar topics.You may also checkout our training program to get in-depth knowledge on jQuery along with its various applications, you can enroll here for live online training with 24/7 support and lifetime access.

Got a question for us? Mention them in the comments section of  this blog and we will get back to you.