Removing an SVG element from the DOM using jQuery

Question

I'm using jQuery to add an element to an embedded SVG like this:

 var rect = SVG('rect');
 $(rect).attr( { x: left,
                 y: top,
                 width: right - left,
                 height: bottom - top,
                 style: style } );
 $(parentElement).append(rect);

parentElement could be for example $('g:first', svgRoot), where svgRoot refers to the embedded SVG element.

function SVG(elementName) {
        return document.createElementNS('http://www.w3.org/2000/svg', elementName);
}

This works well, the new rectangle is shown in the browser and added to the DOM:

However, removing this rectangle fails. It is still shown in the browser and present in the DOM:

$(rect).remove();

I also tried

rect.parentNode.removeChild(rect);

which results in the error message "Uncaught TypeError: Cannot call method 'removeChild' of null".

Do you have any idea how I can fix that? Using jQuery SVG or another plugin/framework is not possible in my project.

Solution 1

I ended up solving this problem using groups.

I ended up with this code :

var group = getGroupByName(name);
group.parentNode.removeChild(group);

...

function getGroupByName(name) {
    var container = document.getElementById("container");
    var groups = container.getElementsByTagName("g");
    for(var i=0; i<groups.length; i++) {
        if(groups[i].getAttributeNS(null, "name") === name) {
            return groups[i];
        }
    }
    return null;
}

Where container is my main SVG element.

This is tried and true. Works properly.

EDIT

As pointed out in the comments. You can find this fiddle that works. Similar to your example. It creates 4 rectangles and removes the 2 first ones.

If you want to remove the first element you have to specify this :

$("rect").first().remove();

Or if you want to do something with ALL of your rectangles you could approach this with something of the sort :

$("rect").each(function() {
     ... //could remove them here
}

Edit 2

According to last comment, as long as you have the reference to the object, you can use it's variable to remove it.

This updated fiddle will show you that using lastRect you can remove this last rectangle that was added.

Solution 2

I found that doing a .find("*") helped a lot, I'm guessing it flattens the DOM out and thus ignores any nesting complexities that jQuery can't handle (perhaps... this is my theory at least).

So for example this removes anything other than rect, g, svg elements.

$("svg").find("*").not("rect, g").remove();

A jSFiddle showing find() and removing svg elements

Comments

[sbaltes]

Thanks for the quick answer. I tried this (structure as in the screenshot above): root.getElementsByTagName('g')[0].removeChild(rect) but the rectangle is still there. I don't want to use the id or name attribute of the rectangle, I'm looking for a solution that just uses the variable rect.

[sbaltes]

Thanks again. I meant using $(rect).remove() (the variable rect, not the string), which did not work for me, but in your fiddle it works. Maybe I have a bug somewhere in my other code. I'll have a look at it tomorrow...

[blo0p3r]

@seba229 updated the answer (edit 2) to reflect what you were trying to do.