Is there an easy way to clear an SVG element's contents?

Question

In HTML, it's very convenient to be able to say:

div.innerHTML = "";

In order to clear a <div> element.

Is there any equivalent if I have an <svg> element instead? There seems to be neither innerHTML nor innerXML or even innerSVG.

I know the SVG DOM is a superset of the XML DOM, so I know I can do something like this:

while (svg.lastChild) {
    svg.removeChild(svg.lastChild);
}

But this is both tedious and less performant. So just curious, does anyone know of any faster or easier way to clear an SVG element?

Answer 1

use this? http://keith-wood.name/svg.html

there's also raphael: http://stackoverflow.com/questions/588718/jquery-svg-vs-raphael

I'd be tempted to trawl through and see who they're doing their .destroy() methods.

Answer 2

You already gave one answer: you can always just loop over all children and remove them. If you think that you have too many child nodes then maybe you want to replace the svg node by an empty one. If your svg node has some attributes you may use a tag where you place all the child nodes and then just replace the node with an empty one.