flash as3 remove all children

Question

Isn't there a simple "remove all children" function in flash? I don't understand why this code isn't working. I add children via:

for (var i in project_array[cp].project_type_clips){
        container.header.type_loader.addChildAt(project_array[cp].project_type_clips[i],i);
        loadCount++
    }

and then remove them via:

for (var i in project_array[cp].project_type_clips){
        container.header.type_loader.removeChildAt(i);
    }

But I get an error that the supplied index is out of bounds, and yet one clip is still left on stage. Likewise, if I try to add them without levels, like this:

for (var i in project_array[cp].project_type_clips){
        container.header.type_loader.addChild(project_array[cp].project_type_clips[i]);
        loadCount++
    }

and remove:

for (var i in project_array[cp].project_type_clips){
        container.header.type_loader.removeChild(project_array[cp].project_type_clips[i]);
    }

I get the same error.

Solution 1

Yet another RemoveAllChildren loop:

while (container.numChildren > 0) {
    container.removeChildAt(0);
}

Solution 2

When you remove an object, the childIndex of the other children is altered. Therefore, you cannot remove children using an increasing value for i, but have to start at numChildren-1 and then decrease:

for (var i:int = obj.numChildren-1; i >= 0; i--) {
   obj.removeChildAt (i);
}

should work.

Solution 3

sprite.removeChildren(); removes all children as documented here.

Solution 4

Here's a nice way to remove all children with a fade effect. You need to include TweenLite (or TweenMax) in your classpath.

It goes through each child, fades it out, and on completion removes it from the stage. It is safe to immediately add children once this is called - and we can safely iterate through the list in ascending order because nothing is removed until the fade effect is complete.

fadeOutChildren(myPanel, 3);

Here's the code:

   public function fadeOutChildren(symbol:DisplayObjectContainer, duration:Number=.5):void {

        trace("REMOVING " + symbol.numChildren + " ITEMS");

        if (symbol != null) 
        {
            for (var i:int=0; i<symbol.numChildren; i++) 
            {
                TweenLite.to(symbol.getChildAt(i), duration, 
                    {
                        alpha: 0,

                        onComplete: function(parent:DisplayObjectContainer, child:DisplayObject):void {

                            parent.removeChild(child);                          
                        },

                        onCompleteParams: [symbol, symbol.getChildAt(i)]
                    }               
                );

            }
        }
    }

This fades out all at once. You can easily add delay: i*.2 to the list of parameters to TweenLite.to if you want them to fade out one by one.

View more solutions

Comments

[weltraumpirat]

@Matt: You're right, it was obviously supposed to say i >= 0. Thank you for finding the typo :)

[mheavers]

ah - failed to realize that the levels would be changing as clips were being removed.

[aruno]

note: numChildren is defined on 'DisplayObjectContainer' so you need to have a class of that type or subclass. You can't for instance do this for a 'DisplayObject', but it will work for 'Sprite' : help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/‌​…

[Cilan]

For posterity, this method is now deprecated. Now we have removeChildren().

[null]

Note that removeChildren() is only available for FP11 and onward.