Flex 3: How do I remove a Component Using a Button in the Component

Question

I'd like to use a button within a component to remove it. So, you click it and the component is gone. But, I haven't figured out how you reference the component from within the component. What should I put in click=""?

My component: popCanvas

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel width="200" height="200"  title="hello"   
        click="remove=">

    </mx:Panel>
</mx:Canvas>

In the main app:

var popCanvas:PopCanvas= new PopCanvas;
        popCanvas.x = 20;
        popCanvas.y = 30;
        this.addChild(popCanvas);

Any suggestions?

Thank you.

-Laxmidi

Answer 1

Okay,

This is what I came up with:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
    <![CDATA[
        public function removeMe(event:MouseEvent):void  {
            this.removeChild(event.currentTarget as DisplayObject);
        }
    ]]>
</mx:Script>

    <mx:Panel width="400" height="300"  title="hello"  click="removeMe(event)">

    </mx:Panel>
</mx:Canvas>

So, I used the event's currentTarget to reference the component in order to remove it. If someone clicks anywhere on the component it's removed.

Thanks.

-Laxmidi