XML Elves

Hi,

I have an SVG which is used for drawing and deleting arrows, I have used line for drawing lines and marker-end for the arrow head.

The marker I have used is as follows:

<marker id="endArrow" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto" preserveAspectRatio="xMidYMid meet">
<path d="M-20,-10 L0,0 -20,10 z"/>
</marker>

I am able to draw the arrows using this marker..

<line id="arrowElt_10" style="stroke:green; stroke-width:1; fill:none" x1="273" y1="112" x2="312" y2="226" marker-end="url(#endArrow)"/>

I face a problem while deleting the arrows. If I click on the line, I am able to delete the arrow.

But if I click on the arrow head(Marker), I am not able to delete the arrow. The reason being I am not able to get the id (in my case it is arrowElt_10). Since I am not getting the id of the element I am not able to delete.

Could anyone tell me how do I get the id even if I click on the arrow head?

Thanks in advance,
Radhika