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.

  1. Remove an element from JavaScript array by index or value.
  2. Remove all matching elements by value from JavaScript array.
  3. Remove elements from JavaScript array using filter (an alternate).
  4. Remove first element from array javascript.
  5. 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.

javascript remove element array

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.

Download

Vincy
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.

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page