使用jQuery从DOM中删除SVG元素

Question

我正在使用jQuery将一个元素添加到嵌入式SVG中,如下所示:

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

parentElement可以是例如$('g:first',svgRoot),其中svgRoot是指嵌入的SVG元素.

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

这很好用,新的矩形显示在浏览器中并添加到DOM:

但是,删除此矩形失败.它仍然显示在浏览器中并出现在DOM中:

$(rect).remove();

我也试过了

rect.parentNode.removeChild(rect);

这导致错误消息"Uncaught TypeError:无法调用方法'removeChild'为null".

你知道我怎么解决这个问题吗？在我的项目中不可能使用jQuery SVG或其他插件/框架.

Answer 1

我最终用groups 解决了这个问题.

我最终得到了这段代码:

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

container我的主要SVG元素在哪里？

这是经过验证的.工作正常.

编辑

正如评论中指出的那样.你可以找到有效的小提琴.与你的例子类似.它创建了4个矩形并删除了第2个矩形.

如果要删除第一个元素,则必须指定:

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

或者如果你想对你的所有矩形做一些事情,你可以用这样的东西来处理:

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

编辑2

根据最后的评论,只要你有对象的引用,你可以使用它的变量来删除它.

这个更新的小提琴将向您显示使用lastRect您可以删除添加的最后一个矩形.