Как я могу удалить всех братьев и сестер и одновременно показывать только одного брата родителя?В моем случае я создал 3 названия кнопок: Прямоугольник, Круг и Полилиния.Когда я нажимаю кнопку, она создает прямоугольник / круг / полилинию с помощью 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>