Remove elements from array in JavaScript

An array is a variable used to store one or more elements of the same data type. Basically, it stores multiple elements of the same type. Sometimes we need to remove these elements from an array. JavaScript offers several built-in array methods to add or remove the elements from an array easily. Using these methods, you can remove an element from start, end, or as well as from a specific index.

These JavaScript array methods are as follows:

All the above methods are array functions offered by JavaScript. These methods are discussed below in detail with examples.

Remove elements from the end of the array - pop()

JavaScript provides the pop() method to remove the elements from the end of the array. It removes the last element of the array and returns the removed element. When an element removes from the array, the length of the array is reduced by 1. See the code and output below to understand:

Example 1

Output

Initially, there are four elements in the array. One element from the last will be removed using the pop() function and three elements will remain in that array.

Elements in array before removing: 
Nike, Adidas, Sparks, RedTape

Removed element from array: RedTape

Elements present in array: 
Nike, Adidas, Sparks

Example 2

By putting the above code in a loop (for, while, or do-while), we can delete all elements one by one from the end of the array. See how it will work:

Output

Elements in array before removing: 
Nike, Adidas, Sparks, RedTape

Array Length after removing elements is: 4

Removed element from array: RedTape
Removed element from array: Sparks
Removed element from array: Adidas
Removed element from array: Nike

Array Length after removing elements is: 0 

Remove elements from the start of the array - shift()

JavaScript provides the shift() method, which is used to remove the element from the start of the array. It removes the first element from an array and returns the removed element. When an element removes from the array, the array length is reduced by 1. See the code and output below how this function works:

Example 1

Output

Initially, there are four elements in the array. One element from the start will remove using the shift() function, and three elements will remain in that array.

Elements in array before removing: 
Nike, Adidas, Sparks, RedTape

Removed element from array: Nike

Elements present in array: 
Adidas, Sparks, RedTape

Example 2

Like the pop() method, we can delete all elements one by one from the start of the array by putting the above code in a loop (for, while, or do-while). In this example, we will put this code in a while loop. See how it will work:

Output

Elements in array before removing: 
Nike, Adidas, Sparks, RedTape

Array Length after removing elements is: 4

Removed element from array: Nike
Removed element from array: Adidas
Removed element from array: Sparks
Removed element from array: RedTape

Array Length after removing elements is: 0 

Remove elements from a specific index in an array - splice()

To remove the element from a specific index position, the splice() method is used. It removes the element from a specific position and returns that removed element. It also allows the users to remove one or more elements from the array.

The splice() method accepts mainly two arguments: initial index position and number of items to be removed. Array index count starts from 0, i.e., a[0]. When the elements remove from an array, the array length is reduced. See the below example and its output how the splice() function works:

Example 1

In this example, we will delete three elements, starts from index 1, i.e., a[1] to a[3].

Output

In the below response, you can see that three elements from the array have been removed, and only two elements (Nike and Bata) have remained in the array.

Elements in array before removing: 
Nike, Adidas, Sparks, RedTape, Bata

Removed element from array: Adidas, Sparks, RedTape,

Elements present in array: 
Nike, Bata

Example 2

In this example, we will put the above code inside a for loop to remove all occurrences of a specific element from the array. It will trace the whole array and remove the matching element one by one from the array.

Output

You can see that element named (Gucci) has been removed twice from the array in the below output, and only two elements (Chanel, Zara) have remained in the array.

Removed element: Gucci
Remaining Element: Chanel, Gucci, Zara

Removed element: Gucci
Remaining Element: Chanel, Zara

You can even remove all elements from the array. See the below code:

Output

See that all elements have been deleted.

Elements in array: Gucci, Chanel, Calvin Klein, Zara
Remaining Element: 

Remove elements from the array using filter()

This method basically removes the element based on the given condition provided by the user. It removes the elements and creates a new array of remaining elements. See the code and output below how it works:

Example 1

In this example, we will check the even-odd values in an array and filter them. The filter() method will check for the even values and return to add them to the modified array. The odd values will remove from the array, and only modified array will be displayed.

Output

See the output below that only even elements have remained in the modified array:

Even elements in array:  56, 24, 348

Remove elements using delete operator

Apart from all these functions, JavaScript offers a delete operator. It helps to remove the element from a specific index position in an array. This operator is used with array name and index number, which you want to remove, e.g., delete arrayname[3]. It returns true after successfully removing an element.

The delete operator helps to remove specific index element directly from the array. Now, with the help of an example, let us see how this delete operator works:

Example

Output

In this output, you can see that if the returned value is true after performing the remove operation, the element presents at index 1 has been deleted successfully.

Elements in array:  Gucci, Calvin Klein, Chanel, Zara
Removed successfully: true
Remaining elements in array: Gucci,, Chanel, Zara

Remove elements using clear and reset operator

JavaScript provides the clear and reset operator to remove the elements from the array. Usually, they do not delete the array elements; they just shift them to another array and clear the original array.

Now, with the help of an example, let us see how it works:

Example 1

Output

In this output, you can see that the original array elements have been shifted to a new array. The initially declared array has been empty, which means no element present in array now.

Initially elements in array:  Gucci, Calvin Klein, Chanel, Zara

Array after removing elements: 

Elements in new array: Gucci, Calvin Klein, Chanel, Zara

Example 2

Other than this, we can remove all elements of the array by setting its length to 0. See the example below:

Output

By setting the array length to 0, all elements of the array have been disabled or removed. See the empty array:

Initially elements in array:  Gucci, Calvin Klein, Chanel, Zara

Array after removing elements: