使用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

我最终使用group s解决了这个问题。

我最终得到了这段代码：

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元素。

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

修改

正如评论中指出的那样。你可以找到有效的this fiddle。与你的例子类似。它会创建4个矩形并删除前2个矩形。

如果要删除第一个元素，则必须指定：

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

或者，如果你想对你的所有矩形做一些事情，你可以用这样的东西来解决这个问题：

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

编辑2

根据最后的评论，只要您有对象的引用，就可以使用它的变量来删除它。

此updated fiddle会告诉您使用lastRect可以删除最后添加的矩形。

Answer 2

我发现做一个.find("*")有很多帮助，我猜它会使DOM变平，从而忽略了jQuery无法处理的任何嵌套复杂性（也许......这至少是我的理论）

因此，例如，这将除去rect，g，svg元素以外的任何内容。

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

A jSFiddle showing find() and removing svg elements