JavaScript Remove Element from Array
by Vincy. Last modified on August 29th, 2022.
In this tutorial, let us learn about some JavaScript basics. How to remove elements from an array? The following list has examples in some languages.
- PHP – array_splice($inputArray, $offset)
- Python – inputArray.remove($element) to remove item by element. inputArray.pop($offset) to remove item by index.
This article gives code to learn how to do this in JavaScript. It has many examples of removing an element from a JavaScript array.
- Remove an element from JavaScript array by index or value.
- Remove all matching elements by value from JavaScript array.
- Remove elements from JavaScript array using filter (an alternate).
- Remove first element from array javascript.
- Remove last element from array javascript.
1) Remove an element from JavaScript array (by index and value)
This quick example gets the first index of the given element. Then, it applies JavaScript splice() by sending the first index position. The splice() removes the item in the specified index.
Quick example
// this JavaScript example removes first occurrence of the matching element from array
const elements = [2, 5, 4, 5, 6, 5, 8];
console.log(elements);
// returns the index of the first match of value '5' from an array
const index = elements.indexOf(5);
// when the element is found the index will be non-negative
if (index > -1) {
// the second parameter '1' asks to remove one element
elements.splice(index, 1);
}
// result array after delete is [ 2, 4, 5, 6, 5, 8 ]
console.log(elements);
This screenshot shows the output of the above example. It shows first the original array and then the modified array after the removal of an item.
2) Remove all matching elements by value from JavaScript array
This example creates a custom JavaScript function to remove all the occurrences of a given element. It iterates all the array elements in a loop.
On each iteration, it compares and calls array.splice() by the current index. In PHP, it is about one line to remove all the occurrences by using array_diff() function.
remove-all-item.html
<html>
<head>
<title>JavaScript Remove All Matching Element from Array</title>
</head>
<body>
<h1>JavaScript Remove All Matching Element from Array</h1>
<script>
function removeAllItem(elementsArray, element) {
var i = 0;
// iterate the elements array and remove matching element
// till the end of the array index
while (i < elementsArray.length) {
if (elementsArray[i] === element) {
elementsArray.splice(i, 1);
} else {
++i;
}
}
return elementsArray;
}
// this JavaScript example removes all occurence of the matching element from array
const elements = [ 2, 5, 4, 5, 6, 5, 8 ];
console.log(elements);
elementAfterRemoval = removeAllItem(elements, 5);
console.log(elementAfterRemoval);
</script>
</body>
</html>
Output
Original Array: (7) [2, 5, 4, 5, 6, 5, 8]
Output Array: (4) [2, 4, 6, 8]
3) Remove elements from JavaScript array using filter (an alternate)
This is an alternate method that returns the same array output as the result of removing an item.
Instead of a loop, it parses the input array by using a JavaScript filter. The filter callback checks the condition to find the element match to remove.
If the match is not found, the current element will be pushed to an output array.
remove-alternate.html
<html>
<head>
<title>JavaScript Remove Element from Array - Alternate Method
using filter</title>
</head>
<body>
<h1>JavaScript Remove Element from Array - Alternate Method
using filter</h1>
<script>
const elements = [ 2, 5, 4, 5, 6, 5, 8 ];
console.log(elements);
var value = 5
// filter function does not change the original array
// but the splice function changes the original array
newElements = elements.filter(function(item) {
return item !== value
})
console.log(newElements)
// result is [ 2, 4, 6, 8 ]
</script>
</body>
</html>
Output
Original Array: (7) [2, 5, 4, 5, 6, 5, 8]
Output Array: (4) [2, 4, 6, 8]
4) Remove first element from array javascript
In JavaScript, the array.shift() function removes the first element of an input array. The shift() function returns the remove element which is 2 in this example.
remove-first-element.html
<html>
<head>
<title>JavaScript Remove First Element from Array</title>
</head>
<body>
<h1>JavaScript Remove First Element from Array</h1>
<script>
// the JavaScript shift function moves elements to the left
// this is like pop from a stack
// splice function can also be used to achieve this
var elements = [ 2, 5, 4, 5, 6, 5, 8 ];
console.log(elements);
// removedElement is 2
var removedElement = elements.shift();
// result array after delete is [ 5, 4, 5, 6, 5, 8 ]
console.log(elements);
</script>
</body>
</html>
Output
Original Array: (7) [2, 5, 4, 5, 6, 5, 8]
Output Array: (6) [5, 4, 5, 6, 5, 8]
5) Remove the last element from array using JavaScript
JavaScript has a function array.pop() to remove the last item of an array. It also returns the removed item to the calling point as like like array.shift().
Note: If the input array is empty then the shift() and pop() will return undefined.
remove-last-element.html
<html>
<head>
<title>JavaScript Remove Last Element from Array</title>
</head>
<body>
<h1>JavaScript Remove Last Element from Array</h1>
<script>
// the JavaScript pop function removes last element from an array
var elements = [ 2, 5, 4, 5, 6, 5, 8 ];
console.log(elements);
// removedElement is 8
var removedElement = elements.pop();
// result array after delete is [ 2, 5, 4, 5, 6, 5 ];
console.log(elements);
</script>
</body>
</html>
Output
Original Array: (7) [2, 5, 4, 5, 6, 5, 8]
Output Array: (6) [2, 5, 4, 5, 6, 5]
This example created custom functions in JavaScript to remove all the occurrences of the specified element. Instead, there should be a native function in JavaScript for doing this. PHP, Python and most of the languages have the native function for this.
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.