Flex: Delete visual element - apache-flex

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>

Answer 2

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Script>
import mx.core.IVisualElement;
import spark.components.Button;
private function getNewElement():IVisualElement
{
var btn:spark.components.Button = new spark.components.Button();
btn.label = "button " + myContent.numElements;
return btn;
}
private function addFirstElement():void
{
myContent.addElementAt( getNewElement(), 0 );
}
private function removeFirstElement():void
{
if( myContent.numElements > 0 )
myContent.removeElement( myContent.getElementAt( 0 ) );
}
private function removeLastElement():void
{
if( myContent.numElements > 0 )
myContent.removeElementAt( myContent.numElements - 1 );
}
</mx:Script>
<mx:Button label="addFirst" click="addFirstElement();" />
<mx:Button label="removeFirst" click="removeFirstElement()" />
<mx:Button label="removeLast" click="removeLastElement()" />
<mx:Button label="removeAll" click="myContent.removeAllElements()" />
<mx:VBox id="myContent">
</mx:VBox>
</mx:Application>