使用 jQuery 从 DOM 中删除 SVG 元素答案

【问题标题】：Removing an SVG element from the DOM using jQuery使用 jQuery 从 DOM 中删除 SVG 元素
【发布时间】：2013-02-06 17:20:54
【问题描述】：

我正在使用 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 或其他插件/框架。

【问题讨论】：

你能用文本代码替换 svg 代码的截图吗...更容易复制和粘贴并在你的确切代码上运行测试。
jQuery SVG 的存在是因为普通的 jQuery 不能很好地与 SVG 配合使用。您正在走上一条令人头疼的道路。
遗憾的是，jQuery SVG 不能很好地与当前版本的 jQuery 配合使用。应该可以找到使用纯 JavaScript/DOM 的解决方案。稍后我将替换屏幕截图。

标签： javascript jquery html svg

【解决方案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 元素。

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

编辑

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

如果你想删除第一个元素，你必须指定这个：

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

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

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

编辑 2

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

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

【讨论】：

感谢您的快速回答。我试过这个（结构如上图所示）： root.getElementsByTagName('g')[0].removeChild(rect) 但矩形仍然存在。我不想使用矩形的 id 或 name 属性，我正在寻找只使用变量 rect 的解决方案。
再次感谢。我的意思是使用 $(rect).remove() （变量 rect，而不是字符串），这对我不起作用，但在你的小提琴中它可以工作。也许我在其他代码的某个地方有一个错误。我明天去看看……
@seba229 更新了答案（编辑 2）以反映您想要做什么。

【解决方案2】：

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

例如，这会删除除 rect、g、svg 元素之外的任何内容。

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

A jSFiddle showing find() and removing svg elements

【讨论】：