How to remove multiple specific elements from an Array using a loop in JavaScript?

Question

Here is an Array of DOM elements, and I want to remove all those elements that have a certain class, in this case "checked-item". also I want to mutate the original array so I think filter method is out of the question.

taskArr = [some DOM Elements]
taskArr.forEach(function (task) {
 if (task.children[1].className.includes("checked-Item")) {
   taskArr.splice(taskArr.indexOf(task), 1);    
}
});

Your code looks like it should work. What doesn't work in it? — zhokya, May 20 '21 at 06:49
It removes some elements but not all. I don't know why @zhokya — Usman-FE, May 20 '21 at 06:51
@Usman-FE Can you provide a [mcve]? [It seems to work fine for me](https://jsfiddle.net/mp8wt41a/). — Ivar, May 20 '21 at 07:09
@Ivar add the class to consecutive elements and it won't work. `splice` will break the for loop. — adiga, May 20 '21 at 07:11
Loop in the reverse direction or use a while loop as mentioned in the duplicates — adiga, May 20 '21 at 07:12

user650881 · Answer 1 · 2021-05-20T06:58:08.820

0

When a list is mutated while iterating, there can be side effects. The splice can cause the subsequent item to be skipped. This is one reason immutable functions like filter are much easier to reason about.

edited May 20 '21 at 06:58

answered May 20 '21 at 06:50

user650881

2,214
19
31

Is there any way I can mutate the original Array using `filter` method? – Usman-FE May 20 '21 at 07:01
@Usman-FE Assign the outcome back to the original array? – Ivar May 20 '21 at 07:02
Generally after `filter` I would use `map` in order to modify the matched items. – user650881 May 20 '21 at 07:02
I should add that if the subset of filtered items were not needed after processing, the `filter` could be followed with a `forEach`. – user650881 May 20 '21 at 07:21

score 0 · Accepted Answer · answered May 20 '21 at 07:01

0

Your error is probably because you splice elements inside loop, so if you console log the task, not every will be in output. I found an solution, without foreach:

taskArr = [some DOM Elements]
const length = taskArr.length;
var deleted = 0;
for(var i = 0; i < length; i ++){
     if(taskArr[i - deleted].children[1].className.includes("checked-Item")){
         taskArr.splice(i - deleted, 1);
          deleted ++;
     }
}

answered May 20 '21 at 07:01

zhokya

101
6

1

Or you can loop from length to 0 in the reverse direction. You don't have to keep track of `deleted` in that case: [Looping through array and removing items, without breaking for loop](https://stackoverflow.com/questions/9882284) – adiga May 20 '21 at 07:13

How to remove multiple specific elements from an Array using a loop in JavaScript?

2 Answers2