Flash Builder 4.6 | Remove Child | s:TileGroup

Question

I’m sure it’s something super simple that I’m missing, but I’m having issues removing a VBox that’s inside an s:Tilegroup. I can't get it to delete. For a test, I was able to delete the VBox when I only added to the stage (instead of the s:TileGroup). The code below shows the concept that I’m playing with as well.

• I have a button on stage as well as a blank s:TileGroup to start
• When you click the button, it dynamically adds a VBox (that holds some text well) to the s:TileGroup
• When that VBox is created, I’m also adding an event listener so that when you click the vbox, it can be deleted

<fx:Script>
    <![CDATA[
        protected function removeVBOX(event:Event):void{
            var t:DisplayObject = DisplayObject(event.target);
            t.parent.removeChild(t);
        }

        private function addVbox() : void {
            var vbox :VBox = new VBox();
            vbox.addEventListener(MouseEvent.CLICK,removeVBOX);

            vbox.width = 400;
            vbox.height = 500;
            vbox.horizontalScrollPolicy = "off";
            vbox.verticalScrollPolicy = "off";

            vbox.setStyle("backgroundAlpha", 0.39);
            vbox.setStyle("backgroundColor",  0x000000);
            vbox.setStyle("paddingLeft",  "15");
            vbox.setStyle("paddingTop",  "15");
            vbox.setStyle("paddingRight",  "15");
            vbox.setStyle("paddingBottom",  "15");

            var sText :RichText = new RichText();
            var sText2 :RichText = new RichText();
            var sText3 :RichText = new RichText();

            sText.text = "Hello 1";
            sText2.text = "Hello 2";
            sText3.text = "Hello 3";    

            //addElement(vbox);
            table.addElement(vbox);
            vbox.addElement(sText);
            vbox.addElement(sText2);
            vbox.addElement(sText3);

        }

    ]]>
</fx:Script>

<s:Button x="743" y="767" label="Button" click="addVbox()"/>
<s:TileGroup id="table" x="152" y="81" width="627" height="650" horizontalAlign="center" horizontalGap="13"
             orientation="columns" requestedColumnCount="1" verticalAlign="middle" verticalGap="13" >
</s:TileGroup>

Answer 1

Looking at your code, I see that you're adding your VBox to the TileGroup as follows:

table.addElement(vbox);

But then you're trying to remove it using removeChild():

t.parent.removeChild(t);

The proper method to add/remove items to/from Spark containers is add/removeElement():

var t:IVisualElement = IVisualElement(event.target);
t.parent.removeElement(t);