Often users need to add or remove a specific item, whether they work with a queue or an array. JavaScript has many methods and techniques; that can remove an element from an array without changing the original JS array.
JavaScript arrays are an ordered collection of items and store multiple data items within a single variable name of similar data types. This article will help you explore the various methods to remove specific elements from an array using JavaScript.
There are two different ways to remove items or elements from array, index-based and value-based
Approach 1: Value-based removal of items from array
- Using the filter() method to pass string value
- Removing items making a remove method based on value
- Removing an item of a specific integer value with the filter() method
Approach 2: Index-based removal of items from array
- Removing items from an array by index
- Using splice() method
- Using reduce() and indexof() methods
- Using filter()and indexof() method
- Removing specific items using the delete operator
Approach 1: Value-based removal of items from array
Example 1: Using the filter() method to pass string value:
Code Snippet
var demo = ["Hello", "This", "is", "an", "example", "of", "JavaScript"];
let a = "Hello";
const res = demo.filter(number => number !== a);
console.log(res);
document.write('<b>Orignal Array:</b> ' + demo);
document.write('<br><b>Element to Remove:</b> ' + a);
document.write('<br><b>After Remove:</b> ' + res);
Output:
Explanation:
Here, we created an array of string values and passed it to a variable "demo." Then, we define the value of that string which we want to remove from the JS array. Then the filter() method returns those items whose return value is not "false" by the callback.
Example 2: Removing items making a remove method based on value:
Always remember there is no native remove() method available in JavaScript, but users can solve this problem with the Lodash method.
Code Snippet:
var array = [1, 2, 3, 4, 5, 6];
function arrayRemove(arr, value) {
return arr.filter(function(ele){
return ele != value;
});
}
var result = arrayRemove(array, 3);
console.log(result)
document.write('<b>Orignal Array:</b> ' + array);
document.write('<br><b>Element to Remove:</b> 3');
document.write('<br><b>After Remove:</b> ' + result);
Output:
Explanation:
Users can use this simple method and add only numbers and strings as array inputs. But it is always preferred to use the filter() method directly.
Example 3: Removing an item of a specific integer value with the filter() method:
Users can remove any item by their value from a JS array using two JS filter() methods. In the following code snippets, we will discuss how they work:
const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const Removed_items = [5, 8]
const c = a.filter(item => !Removed_items.includes(item))
console.log(c)
document.write('<b>Orignal Array:</b> ' + a);
document.write('<br><b>Element to Remove:</b> 5, 3');
document.write('<br><b>After Remove:</b> ' + c);
Output:
Explanation:
In the above example, we used the filter() method to remove specific items by value. The filter() method uses the callback technique by taking a callback, testing all the items using that callback, and returning the array of all the items which the callback returns "true."
Here, the filter() method returns those items whose return value is not "false" by the callback.
Approach 2: Index-based removal of items from array
Example 1: Removing items from an array by index:
Users can remove a specific item using its index using the JavaScript splice() method. Users can provide the splice() method with two arguments to remove an element at any index. The splice() method accepts many arguments, and we discuss these as follows:
The first argument represents the index of the items users will remove, and the second represents the number of items users will remove. In the code snippet given below, let us understand how it works :
<script>
const demo = [1, 2, 3, 4, 5, 6, 7, 8];
const samp = demo.splice(1, 2, 9, 0);
console.log(demo);
console.log(samp);
document.write('<b>Orignal Array:</b> ' + demo);
document.write('<br><b>Element to Remove:</b> 1, 2, 9, 0');
document.write('<br><b>After Remove:</b> ' + samp);
</script>
Output:
Explanation:
When we created an array demo with eight items, we easily remove any items with their index value using the splice() method. The syntax of this splice() method, i.e., arr.splice(n, 1), removes that specific item with the given index, where n represents the index of the JS items.
Here, we have removed the second and the third items from the array with indexes 1 and 2. And in these places, we have filled items with 9 and 0 using the second argument.
Removing multiple items from an array based on index:
Different approaches can help users to remove multiple items from an array, and these are as follows:
Example 2: Using splice() method:
Code Snippet:
<p><b>Orignal Array:</b> <span id="oarray"></span></p>
<p><b>Index to Remove:</b> <span id="idremove"></span></p>
<p><b>After Remove:</b> <span id="output"></span></p>
<script>
var a = ['a', 'b', 'c', 'd', 'e'];
document.getElementById('oarray').innerHTML=a;
function samp(a) {
remove = [1, 4];
document.getElementById('idremove').innerHTML=remove;
for (var i = remove.length -1; i >= 0; i--)
a.splice(remove[i], 1);
document.getElementById('output').innerHTML=a;
}
samp(a);
</script>
Output:
.png)
Explanation:
We used HTML and JavaScript to create a program that triggers a loop and runs it to the number of times items are present in the JS array. Then, we used the splice() method that removes all the elements with the particular index.
Example 3: Using reduce() and indexof() methods
Code Snippet:
<p id = "demo1"></p>
<p id = "remove">Index to Remove: 0,1</p>
<p id = "demo2"></p>
<script>
var a = ['a', 'b', 'c', 'd', 'e'];
document.getElementById('demo1').innerHTML = "Orignal Array: " + a ;
function samp() {
var indexes = [0, 1];
a = a.reduce((b, value, index) =>
indexes.indexOf(index) == -1 ? [...b ,value] : b, [])
document.getElementById('demo2').innerHTML = "After Remove: " + a;
}
samp();
</script>
Output:
Explanation:
Here, we used the reduce() and indexof() methods to sort the items in the array it contains after removing them. These methods are appropriate for removing multiple items from a JS array.
Example 4: Using filter()and indexof() method
Code Snippet:
<p id = "demo1"></p>
<p id = "remove">Index to Remove: 0,1</p>
<p id = "demo2"></p>
<script>
var a = ['a', 'b', 'c', 'd', 'e'];
document.getElementById('demo1').innerHTML = "Orignal Array: " + a ;
function samp() {
var indexes = [0, 1];
a = a.filter(function(value, index) {
return indexes.indexOf(index) == -1;
})
document.getElementById('demo2').innerHTML = "After Remove: " + a;
}
samp();
</script>
Output:
.png)
Explanation:
The methods will return only those items not present in the array in JavaScript.
Method 4: Removing specific items using the delete operator:
If users do not want to change the array length property while removing items can use this method. It neither affects the length nor the index of the items. Let us dig deep into what happens when users use this operator:
Code Snippet:
<script>
const a = ["a", "b", "c", "d", "e", "f", "g", "h"];
delete a[6];
document.write('<b>Orignal Array:</b> ' + a);
document.write('<br><b>Element to Remove:</b> 6');
document.write('<br><b>After Remove:</b> ' + a);
</script>
Output:
.png)
Conclusion:
Among the above-cited JS methods, some are more efficient and useful in specific cases, while others are less. So it is up to the programmer which JS method to use for removing specific items from an array in JavaScript.
But they need to work wisely, while using the remove() method as there is no Array.remove() in JavaScript, one can assume.