Tip: Remove All Children From A DisplayObjectContainer

I seem to always be looking for a way to remove all the children in a given DisplayObjectContainer when working on my projects. I've now repeated this code enough that I finally decided to just throw this method into a DisplayObjectUtils class and use it from there without having to remember how to do it each time I do want to use it (I have a terrible memory so remembering even simple stuff like this becomes a chore). I usually need this when I am clearing children out of a holder (like a thumbnail holder in a gallery) or something to that effect.

Here is the static method I just created in my new class that will handle this.

  1. /**
  2. * Removes all the children from the specified DisplayObjectContainer.
  3. *
  4. * @param $do The DisplayObjectContainer to remove children from
  5. *
  6. * @return void
  7. */
  8. public static function removeAllChildren($do:DisplayObjectContainer):void
  9. {
  10.     while ($do.numChildren)
  11.     {
  12.         $do.removeChildAt(0);
  13.     }
  14. }

Please note that there is several ways to do this type of thing (always more than one way to skin a cat). This has worked for me pretty well so I'm posting it up. Enjoy.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.


This is a really handy method, I put it in any class that extend DisplayObject.

One the topic of the DisplayList, I wrote a very simple DepthManager class that allows you to easily layer DisplayObjects, independent of depth added (kinda like using levels in AS2). It handles dealing with preoccupied depths the same way the DisplayList does in ActionScript 3.

And does so using only a single array, and doesn't use DisplayObject.setChildIndex() at all. Hope it comes in handy for others.

Here's an interesting question, why is it faster to remove children from the bottom up then from the top down?

Bottom up:
while(numChildren) removeChildAt(0);

Top down:
while(numChildren) removeChildAt(numChildren-1);

What you've posted Matt is definitely the faster approach, and I'm glad you did because up until now I've been using the top down approach (thinking it was faster). I just did a speed test, and in that case atleast, bottom up was twice as fast as top down.

The reason why it seems it should be the opposite to me is, when you remove them from the bottom up, you are reassigning the depth of each child each time the loop executes. Like if you have a bunch of block stacked on top of each other and you remove from the bottom, each block is now at a different depth. But if you remove from the top down, you never reassign the depths.

I know that using the top down approach does require checking the numChildren property twice each loop, and negating it by one...but that definately can't be whats making it twice as slow...it must be something else.

Anyways an interesting thought, and goes to show it can be worth running a quick speed test because sometimes things that seem should be faster aren't. I updated the DepthManager class I posted earlier to implement the bottom up approach.

Hey Man, great stuff. Check out the LayoutManager in guttershark, it has that plus some ordering (layering), and tons of align methods.
here's a link to the docs:

@JP DeVries - I guess it's just bucause you don't have to calculate (numChildren-1) on each iteration.

Bottom up:
while(numChildren) removeChildAt(0);

Top down:
while(numChildren) removeChildAt(numChildren-1);

Thanks Aaron, just checked out the GutterShark LayoutManager, thats a very nice class! I just got the library, and I can't wait to start using it.

@vitaLee yea it is true that you don't have to perform that calculation each time if its bottom up, but it does seem that bottom up requires re layering all the clips each time, which logically to means seems like it should take longer...but obviously to my surprise it was very much the opposite.
Maybe it takes less time to luck up objects that are in lower Array element depths?

Hey everyone,

In some cases I preferer to use a For statement. Why!?.. because due to the code, it goes faster. Using "While" the calculation that was suppose to do, it was lost and things went wrong.


Hi thax for nice post. I was also this method but with different perspective. I like to share with you.

for (;dspObject.numChildren>0;){

@Ajitpals: that works too. as i said, more than one way to skin a cat 😛

you just saved my rear end.
I tried doing each one manually but for some reason it didn't work. and I addChild 2x but numChildren tells me 3.

hi, thank you about your article.

Hey man, just wanted to thank you for taking the time to post this class! So simple yet so effective. Nice. 😉

Leave a comment