Is there an easy way to clear an SVG element's contents?
JavascriptXmlDomSvgJavascript Problem Overview
In HTML, I can clear a <div> element with this command:
div.innerHTML = "";
Is there an equivalent if I have an <svg> 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?
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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
Solution 3 - Javascript
Use d3.js. This will remove all contents nodes from svg.
svg.selectAll("*").remove();
Solution 4 - Javascript
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);
Solution 5 - Javascript
I've tried svg.text("") and it seems to work. Clears out all the inner text, keeps the attributes.
Solution 6 - Javascript
If you want to keep defs of your svg as me use this
function clear(prnt){
let children = prnt.children;
for (let i=0;i<children.length;){
let el = children[i];
if (el.tagName!=='defs'){
el.remove();
}else(i++);
}
}
Solution 7 - Javascript
No need to loop, just assign an empty string
svg.innerHTML = "";
Solution 8 - Javascript
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
Solution 9 - Javascript
use this? http://keith-wood.name/svg.html
there's also raphael: https://stackoverflow.com/questions/588718/jquery-svg-vs-raphael
I'd be tempted to trawl through and see who they're doing their .destroy() methods.
Solution 10 - Javascript
element = document.getElementById("elementID");
element.parentNode.removeChild(element);
I got the idea from http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/