RemoveChildAt with removedEffect and MoveEffect doesnt work properly

Question

Hi all,
RemoveChildAt is not removing all the childs when i use within a loop.
How can i remove all the children one by one (using loop) while using the Effects like removedEffect and MoveEffect.
Please execute following example to experience the problem.
Thanks in advance
Main Application
RemoveChildProblem.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            private function addChildren():void{
                for(var i:Number = 0 ; i < 10; i++){
                    var node:Node = new Node();
                    nodesArea.addChild(node);
            private function removeChildren():void{
                for(var i:Number = 0 ; i < nodesArea.numChildren; i++){
                    nodesArea.removeChildAt(i);
        ]]>
    </mx:Script>
    <mx:Button label="Add Children" click="addChildren()"/>
    <mx:Button label="Remove Children" click="removeChildren()"/>
    <mx:HBox width="100%" id="nodesArea">
    </mx:HBox>
</mx:Application>
Node Component
Node.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas moveEffect="Move" showEffect="Fade" removedEffect="Fade" xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100" backgroundColor="#B6A3FF">
</mx:Canvas>

Answer 1

private function removeChildren():void {
  for(var i:Number = 0; i < nodesArea.numChildren; i++){
    nodesArea.removeChildAt(i);
should be:
private function removeChildren():void {
  for (var i:Number = nodesArea.numChildren - 1; i >= 0; i--){
    nodesArea.removeChildAt(i);