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

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

In HTML, I can clear a

element with this command:

div.innerHTML = "";  

Is there an equivalent if I have an element? I can't find an innerHTML nor innerXML or even innerSVG method.

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 slow. Is there a faster or easier way to clear an SVG element?

Answer by Moin Zaman for Is there an easy way to clear an SVG element's contents?

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 by Volker for Is there an easy way to clear an SVG element's contents?

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.

Answer by Travis for Is there an easy way to clear an SVG element's contents?

element = document.getElementById("elementID");  element.parentNode.removeChild(element);  

I got the idea from http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/

Answer by FrancesKR for Is there an easy way to clear an SVG element's contents?

If you're using jQuery, you can just do

$("#svgid").empty();  

This deletes all child elements of the svg while leaving its other attributes like width and height intact.

Answer by Calvin Li for Is there an easy way to clear an SVG element's contents?

I've tried svg.text("") and it seems to work. Clears out all the inner text, keeps the attributes.

Answer by Praveen Prasannan for Is there an easy way to clear an SVG element's contents?

This will remove all contents nodes from svg.

svg.selectAll("*").remove();  

Answer by Yaron Shamir for Is there an easy way to clear an SVG element's contents?

You can use the clone and replace the element with the cloned one.

    var parentElement = svg.parentElement      var emptySvg = svg.cloneNode(false);      parentElement.removeChild(svg);      parentElement.appendChild(emptySvg);  

This will append the svg at the end, you might want to get the element before and append accordinaly

Answer by cuixiping for Is there an easy way to clear an SVG element's contents?

I agree to use the clone and replace the element with the cloned one.

Only one line code:

svg.parentNode.replaceChild(svg.cloneNode(false), svg);  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 71