Dynamically Removing an SVG Element

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <script type="text/ecmascript">
    function remove(event)
    {
       var rectangle = event.target;
       var parent    = rectangle.parentNode;
       parent.removeChild(rectangle);
    }
  </script>

  <g transform="translate(50,50)">
     <text font-size="24" fill="blue">
       Click inside the rectangle:
     </text>
  </g>

  <g transform="translate(50,100)">
     <rect onclick="remove(evt)" fill="red"
           x="0" y="0" width="200" height="100"/>
  </g>
</svg>

Related examples in the same category

1.	Determining Attribute Values of SVG Elements
2.	Mouse Clicks and Resizing Circles
3.	Mouse Clicks and Scaled Ellipses
4.	Adding an SVG Element via ECMAScript

Dynamically Removing an SVG Element : JavaScript « SVG « XML

Related examples in the same category