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

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

编辑

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

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

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

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

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

编辑2

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

这个更新的小提琴将告诉你，使用lastRect你可以删除最后添加的矩形。

Answer 2

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

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

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

一个jSFiddle显示find（）并删除svg元素