我正在使用 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 或其他插件/框架。
最佳答案
我最终使用 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
可以删除添加的最后一个矩形。
关于javascript - 使用 jQuery 从 DOM 中删除 SVG 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14735029/