Cannot destroy second children onward from group

Phaser 3
1

I’m creating some group with a render texture and various graphics and when I?m done I’m trying to remove it to make space for the next object

however the graphics remain on scene

I boiled down a test case here https://jsfiddle.net/bhL64xz8/13/

var config = {
    width: 800,
    height: 600,
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

var graphics;

function create ()
{
    graphics = this.add.graphics();

    var color = 0xffff00;
    var thickness = 4;
    var alpha = 1;

    graphics.lineStyle(thickness, color, alpha);

    var a = new Phaser.Geom.Point(400, 300);
    var radius = 128;

    graphics.strokeCircle(a.x, a.y, radius);
    
    var group = this.add.group();
    
    group.add(graphics);
        graphics2 = this.add.graphics();

    var color = 0xffff00;
    var thickness = 4;
    var alpha = 1;

    graphics2.lineStyle(thickness, color, alpha);

    var a = new Phaser.Geom.Point(400, 300);
    var radius = 128;

    graphics2.strokeCircle(a.x, a.y, radius);
     group.add(graphics2);
     
     group.getChildren().forEach(function(i) {i.destroy()})
// UNCOMMENT THIS  AND IT WIll CLEAR>   graphics2.destroy();
}

is there a way to properly clean up a group without tracking each variable individually?

2

Hello, for removing all you can use group.clear(true) or group.clear(true, true)

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Group.html#clear__anchor

Looks like getChildren doesn’t return really an array iterable or I don’t know, but a workaround using ES6 spread syntax can be:
[...group.getChildren()].forEach(function(i) {i.destroy()})