To remove elements from an array is quite simple as javascript provides many built-in methods such as pop(), splice(), filter(), etc. In this article, we will see some useful ways to remove elements from an array.
We will learn to remove specified elements and elements from the start and end of the array as well. Consider some scenario while removing elements such as:
Let's get started.
See the code below, we removed 15 from the array by using the splice() method. The splice() method is used to remove the element from the specified index. It takes two arguments, the first is an index of element and the second is the number of elements you want to remove from this index. It returns the removed element after removing. It has several overloading versions as well.
See, first, we find the index of the element by using the indexOf() method and then pass this index to the splice method. See the code below.
// An Array
const arr = [10, 12, 15, 20];
console.log(arr);
//
const index = arr.indexOf(15);
if (index > -1) {
arr.splice(index, 1);
}
// Display array after removing element
console.log(arr); Output:
[10, 12, 15, 20]
[10, 12, 20]
Here, we used filter() method to remove the element. The filter() method basically returns an array of all the elements except the specified element. It returns a new array that contains all the elements except the element that we removed during the filter. See the code example below.
// An Array
const arr = [10, 12, 15, 20];
console.log(arr);
//
var val = 15;
arr2 = arr.filter(element => element !== val);
// Display array after removing element
console.log(arr2);
Output:
[10, 12, 15, 20]
[10, 12, 20]
In the previous example, we saw to remove the specified element but that remove only single element it means if an array contains multiple occurrences of that number then we need to use this below code. It will remove the occurrences of the element from the entire array. See the code example.
// An Array
const arr = [15, 10, 12, 15, 20];
console.log(arr);
var val = 15;
for (var i = arr.length; i--;) {
if (arr[i] === val) arr.splice(i, 1);
}
// Display array after removing all occurrence of element
console.log(arr);
Output:
[15, 10, 12, 15, 20]
[10, 12, 20]
The delete is an operator that can be used to remove the element but be careful while using it as it removes the element but the index is reset with default empty value and array size does not decrease. See the code example.
// An Array
const arr = [15, 10, 12, 15, 20];
console.log(arr);
delete arr[0];
// Display array after removing element
console.log(arr);
Output:
[15, 10, 12, 15, 20]
[empty, 10, 12, 15, 20]
This is the simplest way to remove the last element from the array. Here, we just assign a new length to the array after decreasing by one which means the array will lose its last element. See the code below.
// An Array
const arr = [15, 10, 12, 15, 20];
console.log(arr);
arr.length = arr.length-1;
// Display array after removing last element
console.log(arr);
Output:
[15, 10, 12, 15, 20]
[15, 10, 12, 15]
The pop() method is used to remove the last element in the array. it returns the element after removing it. It is a built-in method and can be used to
// An Array
const arr = [15, 10, 12, 15, 20];
console.log(arr);
arr.pop()
// Display array after removing last element
console.log(arr);
Output:
[15, 10, 12, 15, 20]
[15, 10, 12, 15]
To remove the first element from the array, we used the shift() method that returns the element after removing. See the code example.
// An Array
const arr = [15, 10, 12, 15, 20];
console.log(arr);
arr.shift()
// Display array after removing first element
console.log(arr); Output:
[15, 10, 12, 15, 20]
[10, 12, 15, 20]