Remove or Delete a Specific Element from an Array in JavaScript
There are a lot of situations in which you might want to delete or remove a given element from an array. For example, you might be storing the id of different users playing a game in an array and once they are out, you will have to remove the id of that particular player. Similarly, you might need to delete a task from an array with a list of to do activities.
In this tutorial, you will learn about different methods which can be used to remove elements based on their value or position. We will also discuss the pros and cons of each of these methods in detail.
Using Array.splice() to Delete One or Multiple Elements From an Array
The Array.splice() method changes the content of an array by removing existing elements and optionally adding new elements. The first parameter passed to this method is the index of the element that you want to delete or remove. The second parameter is the number of elements to remove. This method also returns an array of deleted elements. If you only delete one element, it will return an array with a single element.
You can use the following example code to delete a single element at a particular position or index:
JavaScript
// Delete One Element Using Array.splice(position, 1);
var names = ['Amanda', 'Bella', 'Joshua', 'Mary', 'Harry', 'Laura', 'Ben'];
var deletedName = names.splice(2, 1);
// Output — ["Amanda", "Bella", "Mary", "Harry", "Laura", "Ben"]
console.log(names);
// Output — ["Joshua"]
console.log(deletedName);You can use the following example code to delete multiple consecutive elements starting from a particular position or index :
JavaScript
// Delete Multiple Elements Using Array.splice(position, count);
var names = ['Amanda', 'Bella', 'Joshua', 'Mary', 'Harry', 'Laura', 'Ben'];
var deletedName = names.splice(3, 2);
// Output — ["Amanda", "Bella", "Joshua", "Laura", "Ben"]
console.log(names);
// Output — ["Mary", "Harry"]
console.log(deletedName);You can use the following example code to delete an element with a particular value. The first thing we need to do is get the index of the element that we want to delete using the Array.indexOf() method. After that we check if the returned index is greater than -1. If it is greater than -1, we delete the element at that index using Array.splice() method.
JavaScript
var names = ['Amanda', 'Bella', 'Joshua', 'Mary', 'Harry', 'Laura', 'Ben'];
var indexDel = names.indexOf('Joshua');
if(indexDel > -1) {
names.splice(indexDel, 1);
}
// Output — ["Amanda", "Bella", "Mary", "Harry", "Laura", "Ben"]
console.log(names);It is important to check that the returned index is greater than -1. This is because a non-existent element would return -1 and this will result in deletion of the last element of the array.
JavaScript
var names = ['Amanda', 'Bella', 'Joshua', 'Mary', 'Harry', 'Laura', 'Ben'];
var indexDel = names.indexOf('Sally');
// Not checking the index may cause unwanted deletions.
names.splice(indexDel, 1);
// Output — ["Amanda", "Bella", "Joshua", "Mary", "Harry", "Laura"]
console.log(names);Another important thing you should remember is that Array.indexOf() will only return the index of the first match that it finds.
JavaScript
var names = ['Molly', 'Bella', 'Joshua', 'Molly', 'Harry', 'Molly', 'Ben', 'Molly' ];
var indexDel = names.indexOf('Molly');
// Only deletes first "Molly"
names.splice(indexDel, 1);
// Output — ["Bella", "Joshua", "Molly", "Harry", "Molly", "Ben", "Molly"]
console.log(names);If a value occurs multiple times in an array and you want to remove all its occurrences, it is better to loop through the array and then delete the values one by one. The following example will make it clear.
JavaScript
var names = ['Molly', 'Bella', 'Joshua', 'Molly', 'Harry', 'Molly', 'Ben', 'Molly' ];
for(var i = names.length - 1; i >= 0; i--) {
if(names[i] === 'Molly') {
names.splice(i, 1);
}
}
// Output — ["Bella", "Joshua", "Harry", "Ben"]
console.log(names);Using Array.filter() to Remove Multiple Elements From an Array
You can also use the Array.filter() method to remove multiple elements from an array. You can either store the result in a new array or update the original array. The following example illustrates how this method works:
JavaScript
var names = ['Molly', 'Bella', 'Joshua', 'Molly', 'Harry', 'Molly', 'Ben', 'Molly' ];
names = names.filter(function(elem) {
return elem !== 'Molly'
});
// Output — ["Bella", "Joshua", "Harry", "Ben"]
console.log(names);One advantage of using Array.filter() is that you can use it to not only delete multiple elements with same value, but also multiple elements with different values. Here is an example, where we will delete three different elements from the main array.
JavaScript
var deleteUs = ['Molly', 'Harry'];
var names = ['Molly', 'Bella', 'Joshua', 'Molly', 'Harry', 'Molly', 'Ben', 'Molly', 'Sally', 'Jacob', 'Harry' ];
names = names.filter(function(item) {
return !deleteUs.includes(item);
});
// Output — ["Bella", "Joshua", "Ben", "Sally", "Jacob"]
console.log(names);In the above example, we have removed all instances of both “Harry” and “Molly” at once.
Delete First or Last Element of an Array
Sometimes, you only want to delete the first or last element of an array instead of an element in the middle. In these situation you can use Array.shift() and Array.pop() respectively.
Both these methods return the value of the removed element. They will return undefined if you call them on empty arrays.
JavaScript
var names = ['Amanda', 'Bella', 'Joshua', 'Mary', 'Harry', 'Laura', 'Ben'];
names.shift();
// Output — ["Bella", "Joshua", "Mary", "Harry", "Laura", "Ben"]
console.log(names);
names.pop();
// Output — ["Bella", "Joshua", "Mary", "Harry", "Laura"]
console.log(names);Quick Summary
Let’s recap everything that we have covered in this tutorial.
- If you want to delete only one element from an array, using
Array.splice()would be a good choice. You can also use this method to delete multiple consecutive elements at once. If you want to delete multiple elements which have the same value, you will have to loop over the whole array to delete them one by one. - Another option to delete multiple elements with same value would be to use the
Array.filter()method. This method also allows you to delete multiples instances of two or more different elements in one go. - When you only want to delete the first or last element of an array, using the
Array.shift()andArray.pop()methods would be easier.
If there is anything that you would like me to clarify or if you know some other technique for deleting one or more elements from an array using pure JavaScript, you are more than welcome to comment.
Rate this post —
(No Ratings Yet)
Loading...