[SOLVED] Coding: entity.children.forEach( element => element.destroy()) doesent work

BuildPath.prototype.resetPathButtons = function () {

  pathButs = DozerLeft.findByName('buttonsPossiblePath').children;

  console.log('new destroy', pathButs.length);  

  pathButs.forEach( but => {

      if (!but.name.includes('Def')){



    pathButs = DozerRight.findByName('buttonsPossiblePath').children;

    pathButs.forEach( but => {

      if (!but.name.includes('Def')){ but.destroy();}


    DozerLeft.findByName('buttonsPossiblePath').children.forEach(leftBut => console.log(leftBut.name));

    console.log('after destroy', pathButs.length);

    if ( DozerLeft.findByName('buttonsPossiblePath').children.length > 4){ this.resetPathButtons();}


solved the Issue with a recursive call … but i hate that :slight_smile:
what I`ve done wrong?

as You see I’ve log the result for every call… the last child will never get destroyed?
Depending on the random map the possible way points can rise to about a hundret, that still ok for performance, but I`d like to reduce quick fixes in my code, learn what I did wrong and doesent have any recursive , likely possible dangerous code in my code…

if(help) { graditude( ‘thanx’);}

PS: The Buttons starting with ‘Def’ are default Buttons I’ll need in the next fuction call.

> if ( DozerLeft.findByName('buttonsPossiblePath').children.length > 4){ this.resetPathButtons();}

there are 4 Def Buttons DefLeft , DefRight , DefUp and DefDown…

project: PlayCanvas | HTML5 Game Engine
editor: PlayCanvas | HTML5 Game Engine

theres a much bigger issue: involving gamePad/controller Id like to delay that isssue, still prototype is basically working… :smiley:

pps: the PathButton script doesn’t exist right now, but it will have element.on (thouch and mouse event)
any suggesetions how to handle that are verry welcome…
I belive I’m, still prototyping and have lots of unkilled event handlers :frowning:

This is because as you destroy children, the size of the array of children (pathButs in your case) changes as well so the foreach loop is missing every other child.

For something like this where the array can decrease in size while looping through it, the recommended practise is to loop backwards.


        var children = this.entity.children;
        for (var i = children.length - 1; i >= 0; --i) {
            if (!children[i].name.includes('Def')) {
1 Like

For these issues, please have separate threads

1 Like

Pop() instead of shift() understood :smiley:

Maybe? Depends on the context of the code

1 Like

The array of children should not be directly modified unless it’s a copy of the array from the entity

1 Like

I got the message “go backward”
I only thought forEach(()=>{})
performance much better …
LINT always tells me to avoide “for” but use forIn, forEach, forOut a.s.o.

sorry :cucumber:

They are more or less the same performance Performance of JavaScript .forEach, .map and .reduce vs for and for..of

foreach would have been fine if the array size didn’t change size while iterating through it.

foreach is just seen as a modern way and ‘cleaner’ to loop for an array of objects. There’s less code and duplication of code.

1 Like