Question

所以我有一个绘制圆圈来表示电荷的程序，它还可以绘制电场线和场幅度线。但是，我想添加能够擦除所有场线并留下电荷或擦除所有元素的功能。绘制的所有东西都进入了这个svg：

<svg version="1.1" id="svg" x="0px" y="0px"
        width="710px" height="510px" viewBox="0 0 710 510" style="enable-background:new 0 0 700 500;" xml:space="preserve" onmouseup="mouseUp(evt)">
            <defs>
            <marker id="markerArrow" viewBox="0 0 10 10" refX="1" refY="5"
                markerWidth="6" markerHeight="6" orient="auto">
                <path d="M 0 0 L 10 5 L 0 10 z" />
            </defs>
            <g id="gridLineGroup"></g>
            <g id="fieldLineGroup"></g>
            <g id="chargesGroup"></g>
        </svg>

如您所见，为每种不同类型的图纸创建了组。因此，一旦我想要清除这三个组中的任何一个，我希望它删除该组中的所有元素，但让它再次填满。我不希望用户重新启动网页以重做任何混乱。我经常环顾四周，无法找到适用于我的程序的解决方案。这是一个股票HTML程序。

我试图运行的最新功能是运行此功能的按钮单击：

function clearLines() {
            document.getElementById("svg").removeChild("fieldLineGroup");
        }

感谢您的帮助。

Answer 1

我在这里创造了一个小提琴：https://jsfiddle.net/mattbatman/1vqkgqp4/。

我在集合上使用了remove而不是removeChild。

我选择了组中的所有路径，使选择成为一个数组，因此我可以使用forEach进行迭代，并在每个元素上调用remove：

button.addEventListener('click', () => {
  const paths = [].slice.call(document.querySelectorAll('g#gridLineGroup path'));
  paths.forEach(path => { path.remove(); });
});

清除SVG组中的元素

1 个答案: