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

Question

In HTML, I can clear a

element with this command:

div.innerHTML = \"\";

Is there an equivalent if I have an

相关标签:

Answer 1

Use d3.js. This will remove all contents nodes from svg.

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

Answer 2

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);

Answer 3

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

Answer 4

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 5

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

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

Answer 6

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.