Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to remove an item from JavaScript array by value?
In this tutorial, we will learn to remove an item from a JavaScript array by value.
An array is a data structure that can store a collection of elements. JavaScript provides several methods to manipulate arrays, including removing specific elements by their value rather than their index position.
Following are the main methods to remove an item from an array by value:
- The Array filter() Method
- The Array splice() Method with indexOf()
Using the Array filter() Method
The filter() method creates a new array containing elements that satisfy a given condition. It does not modify the original array, making it ideal for functional programming approaches.
Syntax
let newArray = originalArray.filter(function(element, index, array) {
// return true to keep element, false to remove
});
Parameters
element ? Current element being processed
index ? Index of the current element (optional)
array ? The array being filtered (optional)
Example
<html>
<body>
<h3>Use filter() method to remove an item from array by value</h3>
<p><b>Example 1:</b> Remove value 4</p>
<div id="output1"></div>
<p><b>Example 2:</b> Remove value "E"</p>
<div id="output2"></div>
<script>
let output1 = document.getElementById("output1");
let output2 = document.getElementById("output2");
// Example 1: Remove number 4
let arr1 = [1, 2, 3, 4, 5];
let arr1_new = arr1.filter(function(element) {
return element !== 4;
});
output1.innerHTML = "Original array: " + arr1 + "<br>" +
"After filter(): " + arr1_new;
// Example 2: Remove string "E"
let arr2 = ["A", "B", "C", "D", "E"];
let arr2_new = arr2.filter(function(element) {
return element !== "E";
});
output2.innerHTML = "Original array: " + arr2 + "<br>" +
"After filter(): " + arr2_new;
</script>
</body>
</html>
Using the Array splice() Method
The splice() method modifies the original array by removing elements at a specific index. To remove by value, we first use indexOf() to find the element's position.
Syntax
array.splice(index, deleteCount, item1, item2, ...itemN)
Parameters
index ? Starting position for modification
deleteCount ? Number of elements to remove
items ? Elements to add (optional)
Example
<html>
<body>
<h3>Use splice() to remove an item from array by value</h3>
<p><b>Example 1:</b> Remove value 2</p>
<div id="output1"></div>
<p><b>Example 2:</b> Remove value "B"</p>
<div id="output2"></div>
<script>
let output1 = document.getElementById("output1");
let output2 = document.getElementById("output2");
// Example 1: Remove number 2
let arr1 = [1, 2, 3, 4, 5];
let index1 = arr1.indexOf(2);
let original1 = [...arr1]; // Copy for display
if (index1 > -1) {
arr1.splice(index1, 1);
}
output1.innerHTML = "Original array: " + original1 + "<br>" +
"After splice(): " + arr1;
// Example 2: Remove string "B"
let arr2 = ["A", "B", "C", "D", "E"];
let index2 = arr2.indexOf("B");
let original2 = [...arr2]; // Copy for display
if (index2 > -1) {
arr2.splice(index2, 1);
}
output2.innerHTML = "Original array: " + original2 + "<br>" +
"After splice(): " + arr2;
</script>
</body>
</html>
Comparison
| Method | Modifies Original | Returns | Use Case |
|---|---|---|---|
filter() |
No | New array | Functional programming, keep original intact |
splice() |
Yes | Removed elements | Direct modification of existing array |
Conclusion
Use filter() when you need to preserve the original array and create a new one. Use splice() with indexOf() when you want to modify the original array directly.
623 Views
