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

Question

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?

score 45 · Answer 1 · answered Jun 11 '13 at 17:37

45

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.

answered Jun 11 '13 at 17:37

FrancesKR

1,200
1
12
27

6

Removes tags :( – john k Nov 09 '14 at 20:40
1

To expand on john ktejik's commnet. Using empty() clears all the definitions. Using the loop only clears out those definitions specifically associated with a removed child element. – ouflak Mar 23 '16 at 12:02

Praveen Prasannan · Answer 2 · 2017-02-24T16:23:53.337

29

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

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

edited Feb 24 '17 at 16:23

answered May 15 '14 at 08:55

Praveen Prasannan

7,093
10
50
70

1

Had to use this over `svg.html(null)` for it to work with IE 11. Thank you. – ltrainpr Apr 06 '18 at 21:42
1

Note that `svg` variable here is a d3 selection, not an SVGSVGElement object as in the question. It might be fixed with `d3.select(svg).selectAll("*").remove();` – Sylvain Lesage May 26 '20 at 17:44

score 29 · Accepted Answer · answered Sep 23 '10 at 13:25

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.

score 11 · Answer 4 · answered Dec 21 '15 at 04:46

11

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

answered Dec 21 '15 at 04:46

cuixiping

24,167
8
82
93

what if you have existing defs in it? – SuperUberDuper Aug 14 '20 at 18:41
1

put your defs out of this element. – cuixiping Aug 15 '20 at 02:24

score 4 · Answer 5 · answered Apr 23 '14 at 06:20

4

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

answered Apr 23 '14 at 06:20

Calvin Li

2,614
3
17
25

score 3 · Answer 6 · answered Nov 19 '21 at 10:33

3

No need to loop, just assign an empty string

svg.innerHTML = "";

answered Nov 19 '21 at 10:33

Cody Tookode

862
12
22

score 2 · Answer 7 · answered Jun 12 '20 at 16:53

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

score 1 · Answer 8 · answered Aug 14 '15 at 03:53

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

score 0 · Answer 9 · edited Jan 28 '13 at 22:38

0

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

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

edited Jan 28 '13 at 22:38

Jesus Ramos

22,940
10
58
88

answered Jan 28 '13 at 22:19

Travis

73
1
5

That would remove the element itself rather than just empty it but does indeed work for SVG. – howard10 Mar 28 '13 at 12:35
how does removing the entire element 'work'? This is not what was asked. – john k Nov 09 '14 at 20:45

score 0 · Answer 10 · edited May 23 '17 at 12:10

0

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

there's also raphael: jQuery SVG vs. Raphael

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

edited May 23 '17 at 12:10

Community

1
1

answered Sep 09 '10 at 06:31

Moin Zaman

25,281
6
70
74

2

Looks like they're doing exactly what Aseem is: paperproto.clear = function () { var c = this.canvas; while (c.firstChild) { c.removeChild(c.firstChild); } – robertc Sep 10 '10 at 14:49

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

10 Answers10

Linked

Related