Remove an element from an array in Javascript :
Most of the time we need to manipulate array objects like removing an element from an array. We can either remove an element and change the original array or we can create one different array by changing the original. There are several ways to remove one or more element from an array. Let’s go through each one of them one by one :
Remove one element using splice() and indexOf() :
splice() method can be used to remove one or multiple elements from an array. It takes two arguments: the first one is the index to start the deleting process and the second one is the number of elements you want to delete. So, in our case, it will be 1.splice() returns the elements deleted from the array. For example :
var originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log("Original array : ", originalArray);
var itemToRemove = 6;
var index = originalArray.indexOf(itemToRemove);
var removedItems = originalArray.splice(index, 1);
console.log("Removed items from the array", removedItems);
console.log("Final array after " + itemToRemove + " is removed", originalArray);
It will print the below output :
Original array : [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
Removed items from the array [ 6 ]
Final array after 6 is removed [ 1, 2, 3, 4, 5, 7, 8, 9 ]
As you can see that splice() mutates the original array. To calculate the index of an element in an array, we are using indexOf() method. If you don’t want to change the array elements, you should avoid using this method.
Using slice()
slice() method is useful if you don’t want to change the original array. We will create two new arrays from the original array: the first one will hold all the elements to the left of the deleting element and the second one will hold all the elements to the right of that deleting element. Finally, we will concatenate both arrays to find out the final array.
var originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log("Original array : ", originalArray);
var itemToRemove = 6;
var index = originalArray.indexOf(itemToRemove);
var finalArray = originalArray.slice(index, originalArray.length);
console.log("Final array after " + itemToRemove + " is removed", finalArray);
Output :
Original array : [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
Final array after 6 is removed [ 6, 7, 8, 9 ]
Remove one value using filter() :
filter() can be used to remove one value from an array in JavaScript. It will not change the original array. Based on one condition, it will create one different array filtering out the original array. Let’s try to implement it :
var originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log("Original array : ", originalArray);
var itemToRemove = 6;
var finalArray = originalArray.filter(item => item != itemToRemove);
console.log("Final array after " + itemToRemove + " is removed", finalArray);
It will print the below output :
Original array : [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
Final array after 6 is removed [ 1, 2, 3, 4, 5, 7, 8, 9 ]
Removing multiple values from an array :
The easiest way to remove multiple elements from an array is to use filter() with a condition to check if the current element should be in the final array or not. The elements that we want to filter out should be saved in a different array. filter() will create one different array from the original array.
var originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log("Original array : ", originalArray);
var itemsToRemove = [1, 3, 5, 7, 9];
var finalArray = originalArray.filter(item => !itemsToRemove.includes(item));
console.log("Final array after " + itemsToRemove + " are removed", finalArray);
Output :
Original array : [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
Final array after 1,3,5,7,9 are removed [ 2, 4, 6, 8 ]
Conclusion :
Removing elements from an array in Javascript is pretty straightforward. We have explained different ways to remove single and multiple elements from an array. Try to run the above example and if you have any queries or questions, drop a comment below.
