Deleting an item from an array is easy using JavaScript’s built-in method splice()
. However, if you are somewhat new to scripting, simply knowing about splice does not help you remove a certain item from an array. This article will solidly state the solution to this dilemma.
If you want to remove a specific item from your array, you will simply use a basic loop and a conditional check with the splice()
method.
Here is a breakdown of what we will do in 3 easy steps, so that you can implement this solution yourself later.
The Three Step Process
- Setup a basic ‘for’ loop, iterating backwards
- In the loop, test item for match
- If so, splice the item at that point in the loop
Solid Tip: splice()
takes 2 arguments (index of item to remove, number of items to remove). To ensure compatibility, don’t forget the 2nd.
Removing One Item
Here is our code example using the traditional fruit array. In this example, I want to remove ‘banana’ if it exists.
var myArray = ['apple','orange','banana','pear','peach']; for(var i = myArray.length-1; i >= 0; i--){ // STEP 1 if(myArray[i] == 'banana'){ // STEP 2 myArray.splice(i,1); // STEP 3 } } // returns [apple,orange,pear,peach] |
Removing Multiple Items
The example above just removed ‘banana’ from the array, leaving four items left in the collection. Step 3 above myArray.splice(i,1)
says to remove the item starting at index i
and remove 1 item. If you used the number 2 instead of 1, it would have removed ‘banana’ AND ‘pear’.
If you want to test for 2 specific values, however, you can make a simple modification to step 2, as seen below. I have made the example loops iterate backward to allow this option.
var myArray = ['apple','orange','banana','pear','peach']; for(var i = myArray.length-1; i >= 0; i--){ // STEP 1 if(myArray[i] == 'banana' || myArray[i] == 'peach'){ // STEP 2 myArray.splice(i,1); // STEP 3 } } // returns [apple,orange,pear] |
Does the code works as expected…since you are removing an element in iteration..so you’ll definitely not iterate over pear string..since the length changed in the middle of iteration…
I think you have to be really careful when removing elements from Array while doing iteration…
Its good a overview of splice method…but just thought the code would behave unexpectedly
Vivek, That’s an great question. This particular example will work as intended in any browser. Both JavaScript and PHP have no issues if you are matching a single item.
There is, however, a problem if you change the example to match more than one item and those items are right next to each other- such as ‘banana’ and ‘pear’. ‘Pear’ would be left over because the array shifted left after removing the 1st item.
To be able to match against multiple possible items, the solid solution is to simply iterate backwards. In fact, I will update the example above to do that.
Thanks!
Another method for removing multiple items based on the array index is something like myArray.splice(0, 2). This will remove the first and second items from the provided array. This is useful especially if you are trying to remove some items based on the index of the array.
Hi JP, that’s covered at the top of the “Removing Multiple Items” section and in the “Solid Tip.”
Thank you very much for the solution.
Thanks for the backward iteration tip.