How to remove element from array in forEach loop?

Question

I am trying to remove an element in an array in a forEach loop, but am having trouble with the standard solutions I've seen.

This is what I'm currently trying:

review.forEach(function(p){
   if(p === '\u2022 \u2022 \u2022'){
      console.log('YippeeeE!!!!!!!!!!!!!!!!')
      review.splice(p, 1);
   }
});

I know it's getting into the if because I'm seeing YippeeeeeE!!!!!!!!!!!!! in the console.

MY PROBLEM: I know that my for loop and if logic are sound, but my attempt to remove the current element from the array is failing.

UPDATE:

Tried out Xotic750's answer, and the element is still not being removed:

Here is the function in my code:

review.forEach(function (item, index, object) {
    if (item === '\u2022 \u2022 \u2022') {
       console.log('YippeeeE!!!!!!!!!!!!!!!!')
       object.splice(index, 1);
    }
    console.log('[' + item + ']');
});

Here is the output where the array is still not removed:

[Scott McNeil]
[reviewed 4 months ago]
[ Mitsubishi is AMAZING!!!]
YippeeeE!!!!!!!!!!!!!!!!
[• • •]

So obviously it is going into the if statement as directed, but it's also obvious that the [• • •] is still there.

Is there a reason you are using forEach? If you want to remove items, the most appropriate function is filter. — Jon
– Jon, Commented Jul 17, 2014 at 20:31
Not if you need to keep the reference to the original array. — Xotic750
– Xotic750, Commented Jul 17, 2014 at 20:35
It is not clear from your question, what is the actual problem that you are having? Can you give an example, perhaps a jsFiddle? It seems that you should perhaps be using the index attribute rather than item for your splice — Xotic750
– Xotic750, Commented Jul 17, 2014 at 20:42

Joel G Mathew · Accepted Answer · 2022-04-03 17:59:44Z

365

It looks like you are trying to do this?

Iterate and mutate an array using Array.prototype.splice

var pre = document.getElementById('out');

function log(result) {
  pre.appendChild(document.createTextNode(result + '\n'));
}

var review = ['a', 'b', 'c', 'b', 'a'];

review.forEach(function(item, index, object) {
  if (item === 'a') {
    object.splice(index, 1);
  }
});

log(review);

<pre id="out"></pre>

Which works fine for simple case where you do not have 2 of the same values as adjacent array items, other wise you have this problem.

var pre = document.getElementById('out');

function log(result) {
  pre.appendChild(document.createTextNode(result + '\n'));
}

var review = ['a', 'a', 'b', 'c', 'b', 'a', 'a'];

review.forEach(function(item, index, object) {
  if (item === 'a') {
    object.splice(index, 1);
  }
});

log(review);

<pre id="out"></pre>

So what can we do about this problem when iterating and mutating an array? Well the usual solution is to work in reverse. Using ES3 while but you could use for sugar if preferred

var pre = document.getElementById('out');

function log(result) {
  pre.appendChild(document.createTextNode(result + '\n'));
}

var review = ['a' ,'a', 'b', 'c', 'b', 'a', 'a'],
  index = review.length - 1;

while (index >= 0) {
  if (review[index] === 'a') {
    review.splice(index, 1);
  }

  index -= 1;
}

log(review);

<pre id="out"></pre>

Ok, but you wanted to use ES5 iteration methods. Well and option would be to use Array.prototype.filter but this does not mutate the original array but creates a new one, so while you can get the correct answer it is not what you appear to have specified.

We could also use ES5 Array.prototype.reduceRight, not for its reducing property by rather its iteration property, i.e. iterate in reverse.

var pre = document.getElementById('out');

function log(result) {
  pre.appendChild(document.createTextNode(result + '\n'));
}

var review = ['a', 'a', 'b', 'c', 'b', 'a', 'a'];

review.reduceRight(function(acc, item, index, object) {
  if (item === 'a') {
    object.splice(index, 1);
  }
}, []);

log(review);

<pre id="out"></pre>

Or we could use ES5 Array.protoype.indexOf like so.

var pre = document.getElementById('out');

function log(result) {
  pre.appendChild(document.createTextNode(result + '\n'));
}

var review = ['a', 'a', 'b', 'c', 'b', 'a', 'a'],
  index = review.indexOf('a');

while (index !== -1) {
  review.splice(index, 1);
  index = review.indexOf('a');
}

log(review);

<pre id="out"></pre>

But you specifically want to use ES5 Array.prototype.forEach, so what can we do? Well we need to use Array.prototype.slice to make a shallow copy of the array and Array.prototype.reverse so we can work in reverse to mutate the original array.

var pre = document.getElementById('out');

function log(result) {
  pre.appendChild(document.createTextNode(result + '\n'));
}

var review = ['a', 'a', 'b', 'c', 'b', 'a', 'a'];

review.slice().reverse().forEach(function(item, index, object) {
  if (item === 'a') {
    review.splice(object.length - 1 - index, 1);
  }
});

log(review);

<pre id="out"></pre>

Finally ES6 offers us some further alternatives, where we do not need to make shallow copies and reverse them. Notably we can use Generators and Iterators. However support is fairly low at present.

var pre = document.getElementById('out');

function log(result) {
  pre.appendChild(document.createTextNode(result + '\n'));
}

function* reverseKeys(arr) {
  var key = arr.length - 1;

  while (key >= 0) {
    yield key;
    key -= 1;
  }
}

var review = ['a', 'a', 'b', 'c', 'b', 'a', 'a'];

for (var index of reverseKeys(review)) {
  if (review[index] === 'a') {
    review.splice(index, 1);
  }
}

log(review);

<pre id="out"></pre>

Something to note in all of the above is that, if you were stripping NaN from the array then comparing with equals is not going to work because in Javascript NaN === NaN is false. But we are going to ignore that in the solutions as it it yet another unspecified edge case.

So there we have it, a more complete answer with solutions that still have edge cases. The very first code example is still correct but as stated, it is not without issues.

edited Apr 3, 2022 at 17:59

Joel G Mathew

8,12116 gold badges62 silver badges94 bronze badges

answered Jul 17, 2014 at 20:53

Xotic750

23.6k8 gold badges59 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

novicePrgrmr Over a year ago

Thanks for answering. I tried using your solution, but it still isn't removing the element from the array. I'll put up the details in the question.

Xotic750 Over a year ago

Put console.log(review); after the forEach, like in my example.

quentinadam Over a year ago

Careful, this breaks if two consecutive elements to delete: var review = ['a', 'a', 'c', 'b', 'a']; will yield ['a', 'c', 'b']

danbars Over a year ago

NOTE - This answer is WRONG! The foreach iterate through the array by index. Once you delete elements while iterating the index of following items changes. In this example, once you delete the first 'a', index number 1 now becomes 'c'. Therefore the first 'b' is not even evaluated. Since you didn't try to delete it, it just happened to be ok, but that is not the way. You should iterate through a reverse copy of the array, and then delete items in the original array.

danbars Over a year ago

@Xotic750 - the original answer (now being the first code snippet) is wrong simply because the forEach will not loop through all elements in the array, as I explained in the previous comment. I know that the question was how to remove elements in a forEach loop, but the simple answer is that you don't do that. Since many people are reading those answers, and many times blindly copying answers (especially accepted answers), it is important to note flaws in the code. I think that the reverse while loop is the simplest, most efficient and most readable solution and should be the accepted answer

|

Badacadabra · Accepted Answer · 2017-06-20 21:36:33Z

57

Use Array.prototype.filter instead of forEach:

var pre = document.getElementById('out');

function log(result) {
  pre.appendChild(document.createTextNode(result + '\n'));
}

var review = ['a', 'b', 'c', 'b', 'a', 'e'];
review = review.filter(item => item !== 'a');
log(review);

edited Jun 20, 2017 at 21:36

Badacadabra

8,5357 gold badges33 silver badges54 bronze badges

answered Nov 20, 2016 at 15:50

alemjerus

8,3443 gold badges34 silver badges40 bronze badges

Comments

CPHPython · Accepted Answer · 2019-10-14 16:30:44Z

48

Although Xotic750's answer provides several good points and possible solutions, sometimes simple is better.

You know the array being iterated on is being mutated in the iteration itself (i.e. removing an item => index changes), thus the simplest logic is to go backwards in an old fashioned for (à la C language):

let arr = ['a', 'a', 'b', 'c', 'b', 'a', 'a'];

for (let i = arr.length - 1; i >= 0; i--) {
  if (arr[i] === 'a') {
    arr.splice(i, 1);
  }
}

document.body.append(arr.join());

If you really think about it, a forEach is just syntactic sugar for a for loop... So if it's not helping you, just please stop breaking your head against it.

answered Oct 14, 2019 at 16:30

CPHPython

13.9k5 gold badges68 silver badges77 bronze badges

1 Comment

monkey Over a year ago

This is the best answer. No heroics. Just gets the job done! Nice work.

Park Jun-Hong · Accepted Answer · 2018-04-20 07:08:43Z

I understood that you want to remove from the array using a condition and have another array that has items removed from the array. Is right?

How about this?

var review = ['a', 'b', 'c', 'ab', 'bc'];
var filtered = [];
for(var i=0; i < review.length;) {
  if(review[i].charAt(0) == 'a') {
    filtered.push(review.splice(i,1)[0]);
  }else{
    i++;
  }
}

console.log("review", review);
console.log("filtered", filtered);

Hope this help...

By the way, I compared 'for-loop' to 'forEach'.

If remove in case a string contains 'f', a result is different.

var review = ["of", "concat", "copyWithin", "entries", "every", "fill", "filter", "find", "findIndex", "flatMap", "flatten", "forEach", "includes", "indexOf", "join", "keys", "lastIndexOf", "map", "pop", "push", "reduce", "reduceRight", "reverse", "shift", "slice", "some", "sort", "splice", "toLocaleString", "toSource", "toString", "unshift", "values"];
var filtered = [];
for(var i=0; i < review.length;) {
  if( review[i].includes('f')) {
    filtered.push(review.splice(i,1)[0]);
  }else {
    i++;
  }
}
console.log("review", review);
console.log("filtered", filtered);
/**
 * review [  "concat",  "copyWithin",  "entries",  "every",  "includes",  "join",  "keys",  "map",  "pop",  "push",  "reduce",  "reduceRight",  "reverse",  "slice",  "some",  "sort",  "splice",  "toLocaleString",  "toSource",  "toString",  "values"] 
 */

console.log("========================================================");
review = ["of", "concat", "copyWithin", "entries", "every", "fill", "filter", "find", "findIndex", "flatMap", "flatten", "forEach", "includes", "indexOf", "join", "keys", "lastIndexOf", "map", "pop", "push", "reduce", "reduceRight", "reverse", "shift", "slice", "some", "sort", "splice", "toLocaleString", "toSource", "toString", "unshift", "values"];
filtered = [];

review.forEach(function(item,i, object) {
  if( item.includes('f')) {
    filtered.push(object.splice(i,1)[0]);
  }
});

console.log("-----------------------------------------");
console.log("review", review);
console.log("filtered", filtered);

/**
 * review [  "concat",  "copyWithin",  "entries",  "every",  "filter",  "findIndex",  "flatten",  "includes",  "join",  "keys",  "map",  "pop",  "push",  "reduce",  "reduceRight",  "reverse",  "slice",  "some",  "sort",  "splice",  "toLocaleString",  "toSource",  "toString",  "values"]
 */

And remove by each iteration, also a result is different.

var review = ["of", "concat", "copyWithin", "entries", "every", "fill", "filter", "find", "findIndex", "flatMap", "flatten", "forEach", "includes", "indexOf", "join", "keys", "lastIndexOf", "map", "pop", "push", "reduce", "reduceRight", "reverse", "shift", "slice", "some", "sort", "splice", "toLocaleString", "toSource", "toString", "unshift", "values"];
var filtered = [];
for(var i=0; i < review.length;) {
  filtered.push(review.splice(i,1)[0]);
}
console.log("review", review);
console.log("filtered", filtered);
console.log("========================================================");
review = ["of", "concat", "copyWithin", "entries", "every", "fill", "filter", "find", "findIndex", "flatMap", "flatten", "forEach", "includes", "indexOf", "join", "keys", "lastIndexOf", "map", "pop", "push", "reduce", "reduceRight", "reverse", "shift", "slice", "some", "sort", "splice", "toLocaleString", "toSource", "toString", "unshift", "values"];
filtered = [];

review.forEach(function(item,i, object) {
  filtered.push(object.splice(i,1)[0]);
});

console.log("-----------------------------------------");
console.log("review", review);
console.log("filtered", filtered);

jj689 · Accepted Answer · 2014-07-17 20:42:30Z

1

You could also use indexOf instead to do this

var i = review.indexOf('\u2022 \u2022 \u2022');
if (i !== -1) review.splice(i,1);

answered Jul 17, 2014 at 20:42

jj689

4562 silver badges4 bronze badges

Comments

Jenna Leaf · Accepted Answer · 2017-04-27 21:05:37Z

0

The following will give you all the elements which is not equal to your special characters!

review = jQuery.grep( review, function ( value ) {
    return ( value !== '\u2022 \u2022 \u2022' );
} );

answered Apr 27, 2017 at 21:05

Jenna Leaf

2,51226 silver badges31 bronze badges

Comments

Steve Stilson · Accepted Answer · 2022-08-22 23:26:54Z

I had problems with the following code. My solution follows after. First, the problem: Let's assume you want to trim strings, and discard the string with a 'c' in it:

var review = ['    a      ', '   b   ', '   c   ', '   d   ', '   e   '];

review.forEach(function(item, index) {
   review[index] = item.trim();
   console.log("After trimming, the item is ", review[index]);
  if (review[index] === 'c') {
    review.splice(index, 1);
  }
});
console.log("Review is now: ");
console.log(review);

If you run the above piece of code, you will see that ' d ' is never trimmed. It remains in the review array, with spaces before and after it.

That's because you are messing with the review array that the foreach is built on. It's a lot better to make a copy of the array, and push elements into it that are OK to keep, and skip the ones that are not. Then, output the new FinalArray, like this:

var review = ['    a      ', '   b   ', '   c   ', '   d   ', '   e   '];
var finalArray = [];

review.forEach(function(item, index) {
    // Add it to the new array first.  If it turns out to be bad, remove it before going onto 
    // the next iteration.
   finalArray.push(item.trim());
   console.log("After trimming, the item is ", item.trim());
  if (item.trim() == 'c') { // skip c
    finalArray.pop();     // This way, removing it doesn't affect the original array.
  }
});
console.log("FinalArray is now: ");
console.log(finalArray);

As you can see, this worked perfectly:

Tofandel · Accepted Answer · 2024-08-12 21:15:20Z

0

You could also store a list of items to delete while looping and delete them after

const toDelete = [];
review.forEach((p, i) => {
   if (p === '\u2022 \u2022 \u2022') {
     toDelete.push(i);
   }
});
// We substract j because the index moves every time we remove an item
toDelete.forEach((i, j) => pages.splice(i - j, 1));

It might not be the most efficient method, but it's a good one if you already have a forEach for other stuff and want to delete items in the same iteration

answered Aug 12, 2024 at 21:15

Tofandel

3,6451 gold badge41 silver badges58 bronze badges

Comments

blueren · Accepted Answer · 2017-06-28 15:59:17Z

-1

Here is how you should do it:

review.forEach(function(p,index,object){
   if(review[index] === '\u2022 \u2022 \u2022'){
      console.log('YippeeeE!!!!!!!!!!!!!!!!')
      review.splice(index, 1);
   }
});

edited Jun 28, 2017 at 15:59

blueren

2,8884 gold badges36 silver badges48 bronze badges

answered Jul 17, 2014 at 20:36

Alaeddin Hussein

7861 gold badge7 silver badges15 bronze badges

3 Comments

novicePrgrmr Over a year ago

I don't think is the case. I changed my code assuming p was an index, and now it's not even getting into the if statement.

Xotic750 Over a year ago

@WhoCares You should see the spec ecma-international.org/ecma-262/5.1/#sec-15.4.4.18 The callBack function arguments are item, index, object

Tofandel Over a year ago

This will mutate the array while it is looping and skip over values to delete (and it was already the problem op had)

Collectives™ on Stack Overflow

How to remove element from array in forEach loop?

9 Answers 9

10 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

10 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related