How to get a dynamically created symbol to delete itself on click?

Question

Here's the setup...
I want to have a dynamically created symbol appear upon click of a hotspot. In this case, you click on a pulsating hotspot and a popup box appears.
Here's the code I'm using for that.
//Create an instance element of a symbol as a child of the given parent element
var mySymbolObject = sym.createChildSymbol("gardern_toxins_popup","stage");
So we have the symbol "garden_toxins_popup" from my library placed dynamically on the page. I would like to assign an action to the pop-up itself that allows you to remove the symbol from the stage upon click.
I feel silly for not being able to figure this out. I tried iterations of this bit of code...
//Get the stage from the composition level, get the symbol
sym.getComposition().getStage().getSymbol("garden_toxins_popup").delete();
...but it doesn't work.
So I tried thinking like I was back in Flash and tried the following...
this.parent.removeChild(this);
But no joy on that as well. Is there something I haven't addressed in this logic or am I going about it in the wrong way? Thanks!

Answer 1

Hi, chirpieguy-
You'll want to use the deleteSymbol() API.
http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html
BTW, you should use the capitalized "Stage" to add it to the Stage - the lower case stage has a special meaning with Animate and might not give you what you want..
sym.createChildSymbol("gardentoxins", "Stage");
In the symbol itself, create a click event on a container div, then:
sym.deleteSymbol();
That being said, you don't need to dynamically create and delete an object.  What you can do is to use hide() and show() on an element and use the coordinates of your click to change the CSS value of top/left of this object so that you don't have to do the object management I highlighted above.
Hope that points you in the right direction.
-Elaine