javascript 使用 jQuery 从 DOM 中删除 SVG 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14735029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing an SVG element from the DOM using jQuery
提问by sbaltes
I'm using jQuery to add an element to an embedded SVG like this:
我正在使用 jQuery 向嵌入式 SVG 添加一个元素，如下所示：
var rect = SVG('rect');
$(rect).attr( { x: left,
y: top,
width: right - left,
height: bottom - top,
style: style } );
$(parentElement).append(rect);
parentElement could be for example $('g:first', svgRoot), where svgRoot refers to the embedded SVG element.
parentElement 可以是例如 $('g:first', svgRoot)，其中 svgRoot 指的是嵌入的 SVG 元素。
function SVG(elementName) {
return document.createElementNS('http://www.w3.org/2000/svg', elementName);
}
This works well, the new rectangle is shown in the browser and added to the DOM:
这很有效，新的矩形显示在浏览器中并添加到 DOM：
However, removing this rectangle fails. It is still shown in the browser and present in the DOM:
但是，删除此矩形失败。它仍然显示在浏览器中并出现在 DOM 中：
$(rect).remove();
I also tried
我也试过
rect.parentNode.removeChild(rect);
which results in the error message "Uncaught TypeError: Cannot call method 'removeChild' of null".
这会导致错误消息“未捕获的类型错误：无法调用 null 的方法 'removeChild'”。
Do you have any idea how I can fix that? Using jQuery SVG or another plugin/framework is not possible in my project.
你知道我该如何解决这个问题吗？在我的项目中无法使用 jQuery SVG 或其他插件/框架。
采纳答案by blo0p3r
I ended up solving this problem using groups.
我最终使用groups解决了这个问题。
I ended up with this code :
我最终得到了这个代码：
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;
}
Where containeris my main SVGelement.
container我的主要SVG元素在哪里。
This is tried and true. Works properly.
这是经过验证的。工作正常。
EDIT
编辑
As pointed out in the comments. You can find this fiddlethat works. Similar to your example. It creates 4 rectangles and removes the 2 first ones.
正如评论中指出的那样。你可以找到这个有效的小提琴。类似于你的例子。它创建 4 个矩形并删除前 2 个矩形。
If you want to remove the first element you have to specify this :
如果要删除第一个元素，则必须指定：
$("rect").first().remove();
Or if you want to do something with ALL of your rectangles you could approach this with something of the sort :
或者，如果你想对所有的矩形做一些事情，你可以用这样的方法来解决这个问题：
$("rect").each(function() {
... //could remove them here
}
Edit 2
编辑 2
According to last comment, as long as you have the reference to the object, you can use it's variable to remove it.
根据最后一条评论，只要您拥有对对象的引用，就可以使用它的变量来删除它。
This updated fiddlewill show you that using lastRectyou can remove this last rectangle that was added.
这个更新的小提琴将告诉你使用lastRect你可以删除添加的最后一个矩形。
回答by Alex KeySmith
I found that doing a .find("*")helped a lot, I'm guessing it flattens the DOM out and thus ignores any nesting complexities that jQuery can't handle (perhaps... this is my theory at least).
我发现做 a.find("*")有很大帮助，我猜它会使 DOM 变平，从而忽略 jQuery 无法处理的任何嵌套复杂性（也许……这至少是我的理论）。
So for example this removes anything other than rect, g, svg elements.
因此，例如，这会删除 rect、g、svg 元素以外的任何内容。
$("svg").find("*").not("rect, g").remove();
$("svg").find("*").not("rect, g").remove();
