Flex: Delete visual element

Question

I have a VGroup in my application that contains several custom components of type MyComponent. Now I have a delete method in MyComponent that should once ran delete the element from the VGroup. I know I should use parentDocument.vgroupId.removeElement() but what to pass as a reference?

Note: I want to do the delete within a method from MyComponent

UPDATE: here is my source: In my main application

<s:VGroup id="vgroupId" width="100%" height="100%" />

Now I add my custom component as:

 var cust:FunctionElement = new MyComponent(); // MyComponent extends spark Panel
 vgroupId.addElement(cust);

And from MyComponent I call

parentDocument.vgroupId.removeElement(this) // get this error => TypeError: Error #1034: Type Coercion failed: cannot convert global@5ed30d1 to mx.core.IVisualElement.

If I cast it as this as IVisualElement I get an error that it is equal to null

Answer 1

This example will show how you can do it..

ExampleApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">     
    <fx:Script>
        <![CDATA[
            protected function button1_mouseUpHandler(event:MouseEvent):void
            {
                vgroup.addElement(new MyComponent());
            }
        ]]>
    </fx:Script>
    <s:VGroup id="vgroup" top="30" />
    <s:Button label="Add" mouseUp="button1_mouseUpHandler(event)"/>
</s:Application>

Define MyComponent.mxml like this...

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100" height="35">
    <fx:Script>
        <![CDATA[
            import spark.components.VGroup;
            protected function button1_mouseUpHandler(event:MouseEvent):void
            {
                // A few useful traces to see what's what and where.
                trace(this);
                trace(this.parent);
                trace((this.parent as VGroup).getElementIndex(this));
                // But all we actually need is ...
                var vgroup:VGroup = (this.parent as VGroup);
                vgroup.removeElement(this);
                // (this.parent as VGroup).removeElement(this); // Would also work fine.
            }
        ]]>
    </fx:Script>
    <s:Button mouseUp="button1_mouseUpHandler(event)" label="Kill me!"/>
</s:Group>