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

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
– zhokya, Commented May 20, 2021 at 6:49
It removes some elements but not all. I don't know why @zhokya — Usman-FE
– Usman-FE, Commented May 20, 2021 at 6:51
@Usman-FE Can you provide a minimal reproducible example? It seems to work fine for me. — Ivar
– Ivar, Commented May 20, 2021 at 7:09
@Ivar add the class to consecutive elements and it won't work. splice will break the for loop. — adiga
– adiga, Commented May 20, 2021 at 7:11

zhokya · Accepted Answer · 2021-05-20 07:01:20Z

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, 2021 at 7:01

zhokya

1017 bronze badges

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

1 Comment

adiga Over a year ago

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

user650881 · Accepted Answer · 2021-05-20 06:58:08Z

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, 2021 at 6:58

answered May 20, 2021 at 6:50

user650881

2,54523 silver badges38 bronze badges

4 Comments

Usman-FE Over a year ago

Is there any way I can mutate the original Array using filter method?

Ivar Over a year ago

@Usman-FE Assign the outcome back to the original array?

user650881 Over a year ago

Generally after filter I would use map in order to modify the matched items.

user650881 Over a year ago

I should add that if the subset of filtered items were not needed after processing, the filter could be followed with a forEach.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Linked

Related