Question

如何删除所有兄弟姐妹，一次仅显示1个父元素？就我而言，我创建了3个按钮，分别是Rectangle，Circle和Polyline。当我单击该按钮时，它将通过SVG创建矩形/圆形/折线形状。

我的问题是，当我单击矩形时，它将创建矩形图，然后单击圆，它也会创建形状，但是会超过矩形形状，因此我想隐藏最后生成的形状并一次显示1个形状

下面是代码

<!DOCTYPE html>
<html>
<head>
    <title>Exercise2</title>
</head>
<body>
    <div id="parent">
<table>

    <tr >

        <td>
            <input type="submit" name="recButton" value="Rectangle" onclick=myFunction1()>
        </td>
        <td>
            <input type="submit" name="circleButton" value="Circle" onclick=myFunction2()>
        </td>
        <td>
            <input type="submit" name="polyButton" value="Polyline" onclick=myFunction3()>
        </td>

    </tr>


</table>
        </div>
<svg  id="mySVG" >

</svg>

<script>

    function myFunction1()
    {
        debugger;
        var recta= document.createElementNS("http://www.w3.org/2000/svg","rect");
        recta.setAttributeNS(null,"x",80);
        recta.setAttributeNS(null,"y",20);
        recta.setAttributeNS(null,"width",80);
        recta.setAttributeNS(null,"height",40);
        recta.setAttributeNS(null,"fill","red");
        recta.setAttributeNS(null,"stroke-width",2);
        recta.setAttributeNS(null, "stroke", "yellow");

        document.getElementById("mySVG").appendChild(recta);

    }
    function myFunction2()
    {
        debugger;
        var circlee= document.createElementNS("http://www.w3.org/2000/svg","circle");
        circlee.setAttribute("cx",50);
        circlee.setAttribute("cy",50);
        circlee.setAttribute("r",40);
        circlee.setAttribute("fill","red");
        circlee.setAttribute("stroke","black");
        circlee.setAttribute("stroke-width", 3);

        document.getElementById("mySVG").appendChild(circlee);
    }
    function myFunction3()
    {
        debugger;
        var poly= document.createElementNS("http://www.w3.org/2000/svg","polyline");
        poly.setAttribute("points","20,20 40,25 60,40 80,120");
        poly.setAttribute("fill","none");
        poly.setAttribute("stroke","blue");
        poly.setAttribute("stroke-width",2);

        document.getElementById("mySVG").appendChild(poly);

    }   

</script>
</body>
</html>

如果有任何同级活动，如何删除父元素的所有同级？

0 个答案: