How to remove and replace a particular element of an array in JavaScript ?
One of the highest voted question in StackOverFlow that how we can remove a particular element from an array in JavaScript ? It was so simple to us that remove any element from an array by it’s index or remove element by value and replace the value of the array with another array or another value at any index of the array.
There is mainly two ways do that:
- Remove by an Index.
- Remove by a Value.
- Replace the array value
1. Remove by an Index.
For remove element by it’s index value so you shuold be know the index value of the element. If you know very well index value of that so you can use it value to delete it using the delete statement or using the splice method of the Array class.
Example:
var fruits = ["Apple", "Banana", "Blueberry", "Graphs", "Orange"];
document.writeln("Original Array: ");
fruits.print();
fruits.splice(0, 1);
//it will remove the first value of the array
document.writeln("First Value deleted using splice method: Deleted value is: Apple");
fruits.print();
//Original Array:
//Apple, Banana, Blueberry, Graphs, Orange,
//
//First Value deleted using splice method: Deleted value is: Apple
//Banana, Blueberry, Graphs, Orange,
In above example I removed the first element or array using the splice method. Splice method have the two argument first one is index of the element and the second one is number of element that we want to remove. Here I pass the index for the 0 and 1 for count so only first element was removed from the array.
Above I called the print() method of the array to print the all the element of the array on the screen. But the print() method is not the in-built method of the Array class I just added that method in the prototype of the Array class.
Array.prototype.print = function ()
{
for (i = 0; i < this.length; i++) { document.write(this[i] + ", "); } if (this.length > 0)
{
document.write(" ");
}
}
Above is that print() method, that will print the element of the array on the screen.
Please, don’t delete the element of the array using the delete statement. It will delete only value from the array, but it will not delete it’s index from the array. In short it will change the index value by the undefined, so you can not find that value but the length of the array is still same.
var fruits = ["Apple", "Banana", "Blueberry", "Graphs", "Orange"];
document.writeln("Original Array: ");
fruits.print();
document.writeln("The Length Of Array Is: " + fruits.length);
delete fruits[0];
//it will change the value of the first element to the undefined.
document.writeln("First Value deleted using delete statement: Deleted value is: Apple");
fruits.print();
document.writeln("The Length Of Array Is: " + fruits.length);
//Original Array:
//Apple, Banana, Blueberry, Graphs, Orange,
//
//The Length Of Array Is: 5
//
//First Value deleted using splice method: Deleted value is: Apple
//undefined, Banana, Blueberry, Graphs, Orange,
//
//The Length Of Array Is: 5
So you shuold have to remove the value using the splice.
2. Remove by the Value.
If you don’t know the index of the value so first you have to find the index value of it using the indexOf method. But indexOf method is very limited browser support, indexOf method is is started supported from the Internet Explorer 9. So the older browser from that not supported indexOf.
indexOf Polyfill (Workaround)
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchValue, index) {
if (index == null || index == undefined || index < -1) { index = 0; } if (searchValue == null || searchValue == undefined) { return -1; } if (this.length > 0)
{
for (i = index; i < this.length; i++)
{
if (this[i] == searchValue)
{
return i;
}
}
}
return -1;
}
}
Above code will check the indexOf method is supported by the browser or not, If supported than above code will executed, but If not supported then it will add the functionality of the indexOf method and creates the indexOf method inside the Array prototype so it will be available to all the array and we use same as we can use the native method indexOf.
I also created the method removeByValue inside the Array prototype that will help us to remove the value from the any array without writing same code repeated.
Array.prototype.removeByValue = function ()
{
if (arguments.length > 0)
{
var undeletedValues = [];
for (i = 0; i < arguments.length; i++) { var index = this.indexOf(arguments[i]); if (index > -1)
{
this.splice(index, 1);
}
else
{
undeletedValues.push(arguments[i]);
}
}
return undeletedValues.length == 0 ? true : undeletedValues;
}
return false;
}
Above removeByValue will remove the value from the array that we passed to the method removeByValue(). We can pass any number of value to this method. It will find the indexOf that value and delete that value from the array, If that value not found from the array than it will create the new array and add it to new array.
If multiple value pass to the removeByValue method and all value successfully found and deleted from the array that it will return the true, If some of value not found than it will return the array of un-deleted value.
Example:
var fruits = ["Apple", "Banana", "Blueberry", "Graphs", "Orange"];
document.writeln("Original Value");
fruits.print();
var result = fruits.removeByValue("Banana", "Apple");
document.writeln("Deleting value: Banana, Apple ");
if (result instanceof Array) {
document.writeln(" Below Values is not deleted or not found!!!");
result.print();
}
else {
document.writeln("Another two item was removed!!! : Banana, Apple");
}
document.writeln("Remaining Value");
fruits.print();
var result = fruits.removeByValue("Orange", "Pineapple");
document.writeln("Deleting value: Orange, Pineapple ");
if (result instanceof Array) {
document.writeln(" Below Values is not deleted or not found!!!");
result.print();
}
else {
document.writeln("Another two item was removed!!! : Orange, Pineapple");
}
document.writeln("Remaining Value");
fruits.print();
//Original Value
//Apple, Banana, Blueberry, Graphs, Orange,
//
//Deleting value: Banana, Apple
//
//Another two item was removed!!! : Banana, Apple
//
//Remaining Value
//Blueberry, Graphs, Orange,
//
//Deleting value: Orange, Pineapple
//
//Below Values is not deleted or not found!!!
//Pineapple,
//
//Remaining Value
//Blueberry, Graphs,
3. Replace the array value
We can also replace value of the array, By replacing means we can delete some value of the array and add new value to the place of that index.
Example:
var fruits = ["Apple", "Banana", "Blueberry", "Graphs", "Orange"];
var newFruits = ["Watermelon", "Pineapple"];
var newFruits1 = ["Custard Apple"];
document.writeln("Original Value");
fruits.print();
fruits.splice(2, 1);
document.writeln("One value is deleted at the index of the 2");
document.writeln("Remaining Value");
fruits.print();
document.writeln("Let's delete the Graphs and add some new value");
fruits.splice(2, 1, newFruits);
document.writeln("Remaining Value");
fruits.print();
document.writeln("Let's add the new value to the aray without delete or replacing another value.");
fruits.splice(2, 0, newFruits1);
document.writeln("Remaining Value");
fruits.print();
//Original Value
//Apple, Banana, Blueberry, Graphs, Orange,
//
//One value is deleted at the index of the 2
//
//Remaining Value
//Apple, Banana, Graphs, Orange,
//
//Let's delete the Graphs and add some new value
//
//Remaining Value
//Apple, Banana, Watermelon,Pineapple, Orange,
//
//Let's add the new value to the aray without delete or replacing another value.
//
//Remaining Value
//Apple, Banana, Custard Apple, Watermelon,Pineapple, Orange,
Here splice method of the Array class also can replace the value and add the new value to the array.
I Hope you enjoyed to this article, Please comment down your review about this,
Happy Coding!!!
🙂