javascript - 使用 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: Cannot call method 'removeChild' of null”。

你知道我该如何解决这个问题吗？在我的项目中无法使用 jQuery SVG 或其他插件/框架。

Answer 1

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

我最终得到了这段代码:

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 可以删除添加的最后一个矩形。