How to delete specific array elements from within a foreach loop in javascript

Question

var fruit = ["apple","pear","pear","pear","banana"];

How do I remove all "pear" fruit from this array?
I tried the following, but still one pear remains:

for(var f in fruit) {
 if ( fruit[f] == "pear" ) {
 fruit.splice(f, 1);
 }
}
for(var f in fruit) {
 document.write(fruit[f]+"<br>"); 
}

Outputs:

apple 
pear 
banana

​What am I doing wrong? Live demo: http://jsfiddle.net/SbxHc/

• Derek 朕會功夫: Wait... f is not even an index (number)!
• user1106925: fruit = fruit.filter(function(f) { return f !== "pear"; });

Answer 1

var fruit = ["apple", "pear", "pear", "pear", "banana"],
 i;
for (i = 0; i < fruit.length; ++i) {
 if (fruit[i] === "pear") {
 fruit.splice(i--, 1);
 }
}
console.log(fruit);
//["apple", "banana"]

• Nick: Thanks! Do I have to use a loop like yours? Is it also possible using the foreach variant?
• Derek 朕會功夫: Try this [].forEach().
• Esailija: @Nick No it's not possible. You should never use for..in with arrays anyway.
• schellmax: ...and it doesn't matter wheter it's '++i' or 'i++' in the above code, just in case someone else is wondering.

Answer 2

for (var i = fruit.length - 1; i > -1; i--) {
 if (fruit[i] == "pear")
 fruit.splice(i, 1);
}

• Derek 朕會功夫: So where is the fruit[i] == "pear" part?
• Tom: oeps, what a mistaka to maka, ;-)

Answer 3

When you remove items from an array as you iterate over it, you would generally iterate backwards so that the current index doesn't skip over items as you remove them:

var fruit = ["apple","pear","pear","pear","banana"];
var i;
for (i = fruit .length - 1; i >= 0; i--) {
 if (fruit [i] === "pear") {
 fruit .splice(i, 1);
 } 
}
console.log(fruit );

• Nick: Indeed! Too bad it can't be done with the for...in but I guess I'm just lazy. :P

Answer 4

If there are plenty of 'wrong' elements in the original array, I suggest at least considering not using in-place array, instead collecting all the 'right' elements into a new array:

var rightFruits = [];
for (var i = 0, len = fruit.length; i < len; ++i) {
 if (fruit[i] !== 'pear') {
 rightFruits.push(fruit[i]);
 }
}

• Nick: Thanks, we used to do this approach with C#. Is it more costly to do so, instead of using a splice() ?
• raina77ow: @Derek Quick question: how arrays are implemented in JavaScript?
• user1106925: @Nick: Don't worry about performance unless it's a large collection. I'd guess that .push() may be faster when there are lots of removals, since .splice() needs to reindex the array from the current point forward every time an item is removed. Only testing will tell though.
• raina77ow: @amnotiam Yep, you're right; it all depends on the proportion of 'bad/good' elements, but splice is usually a costly operation - especially if it's repeated, and if the array it's used on is large.
• raina77ow: And answering my own question - push/splice test.

Answer 5

var i;
for (i = 0; i < fruits.length; i += 1) {
 if (fruits[i] == "pear") {
 fruits.splice(i, 1);
 i -= 1;
 }
}

6.4. Enumeration

Since JavaScript's arrays are really objects, the for in statement can be used to iterate over all of the properties of an array. Unfortunately, for in makes no guarantee about the order of the properties, and most array applications expect the elements to be produced in numerical order. Also, there is still the problem with unexpected properties being dredged up from the prototype chain.

Fortunately, the conventional for statement avoids these problems. JavaScript's for statement is similar to that in most C-like languages. It is controlled by three clauses: the first initializes the loop, the second is the while condition, and the third does the increment:

var i;
for (i = 0; i < myArray.length; i += 1) {
 document.writeln(myArray[i]);
}

Answer 6

You could also use a filter:

let noPears = fruits.filter(fruit => fruit != 'pear')

Answer 7

var i; while ((i = fruit.indexOf("pear")) > -1) fruit.splice(i,1);

Be aware that Array.indexOf is not supported by IE8 and below. -_-

Answer 8

Why not iterate the list backwards? That way, when you delete an element from the list and the length changes, it doesn't break the loop logic:

var fruit = ["apple","pear","pear","pear","banana"];
for (var i = fruit.length - 1; i >= 0; i--) {
 if (fruit[i] === "pear") {
 fruit.splice(i, 1);
 }
}
console.log(fruit); // ["apple", "banana"]

Answer 9

If it doesn't care to iterate reverse, you can use a combination of while and array's pop-function

var daltons = [ 
 { id: 1, name: "Joe" }, 
 { id: 2, name: "William" }, 
 { id: 3, name: "Jack" }, 
 { id: 4, name: "Averell" } 
];
var dalton;
while (dalton=daltons.pop()) {
 console.log(dalton.name);
}
console.log(daltons);

Answer 10

for(var f in fruit) {
 if ( fruit[f] == "pear" ) {
 fruit.splice(f-1, 1);
 }
}
for(var f in fruit) {
 document.write(fruit[f]+"<br>"); 
}

enjoy