How do I remove these green dots randomly?

Question

 function levelOneGF(){document.body.innerHTML='<svg id="Layer_1" height="400" width="700" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 400"><defs><style>.cls-1,.cls-11,.cls-12,.cls-2,.cls-3,.cls-5,.cls-6,.cls-7{fill:#fff;}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-18,.cls-2,.cls-20,.cls-21,.cls-22,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke:#000;stroke-miterlimit:10;}.cls-2,.cls-4{stroke-width:0.5px;}.cls-3{stroke-width:0.53px;}.cls-10,.cls-13,.cls-20,.cls-22,.cls-4,.cls-8,.cls-9{fill:none;}.cls-21,.cls-22,.cls-5{stroke-width:0.75px;}.cls-6{stroke-width:0.92px;}.cls-7,.cls-8{stroke-width:0.94px;}.cls-9{stroke-width:0.58px;}.cls-11{stroke-width:0.17px;}.cls-12{stroke-width:0.55px;}.cls-13,.cls-14{stroke-width:0.35px;}.cls-14{opacity:0.28;}.cls-15,.cls-16{fill:blue;}.cls-16{stroke-width:0.88px;}.cls-17,.cls-18{fill:#ed1e79;}.cls-17{stroke-width:0.84px;}.cls-18{stroke-width:0.74px;}.cls-19{font-size:24px;font-family:Webdings;}.cls-20{stroke-width:0.35px;}.cls-21{opacity:0.33;}</style></defs><path class="cls-1" d="M104,4.39l201.5,295.34s5,7.3,13,9.75c1.9,12.14,6.88,19.43,15.13,13.89-8.25,5.54-5.34,9.81,5.89,11C334.11,341.7,337,346,337,346l35.67,52.29"/><line class="cls-1" x1="362.88" y1="1.93" x2="623" y2="392.73"/><line class="cls-1" x1="2.75" y1="97.64" x2="694.78" y2="98.25"/><line class="cls-1" x1="0.91" y1="289.05" x2="692.94" y2="284.14"/><line class="cls-2" x1="297.23" y1="283.53" x2="427.91" y2="102.55"/><line class="cls-2" x1="292.94" y1="278.01" x2="424.23" y2="97.02"/><line class="cls-2" x1="288.64" y1="271.26" x2="419.93" y2="92.12"/><line class="cls-2" x1="284.35" y1="266.35" x2="415.64" y2="84.14"/><line class="cls-2" x1="280.67" y1="260.21" x2="411.34" y2="76.17"/><line class="cls-2" x1="276.37" y1="252.85" x2="406.44" y2="69.42"/><line class="cls-2" x1="270.24" y1="244.88" x2="402.75" y2="62.06"/><line class="cls-2" x1="264.72" y1="237.52" x2="397.23" y2="54.69"/><line class="cls-2" x1="257.97" y1="228.31" x2="392.33" y2="46.72"/><line class="cls-2" x1="253.06" y1="221.56" x2="386.8" y2="39.97"/><line class="cls-2" x1="249.38" y1="214.2" x2="381.28" y2="30.77"/><line class="cls-2" x1="244.47" y1="206.84" x2="376.37" y2="23.4"/><line class="cls-2" x1="240.18" y1="200.71" x2="370.24" y2="17.27"/><line class="cls-2" x1="235.88" y1="196.41" x2="366.56" y2="12.98"/><line class="cls-2" x1="231.59" y1="188.44" x2="361.65" y2="5"/><line class="cls-2" x1="228.52" y1="181.07" x2="361.04" y2="-9.11"/><line class="cls-2" x1="224.23" y1="174.94" x2="354.9" y2="-15.25"/><line class="cls-2" x1="219.32" y1="167.58" x2="344.47" y2="-11.56"/><line class="cls-2" x1="212.04" y1="163.48" x2="343.25" y2="-19.95"/><line class="cls-2" x1="208.25" y1="156.17" x2="337.6" y2="-29.08"/><line class="cls-2" x1="203.24" y1="148.88" x2="332.59" y2="-36.37"/><line class="cls-2" x1="198.87" y1="142.81" x2="326.37" y2="-42.42"/><line class="cls-2" x1="194.51" y1="138.57" x2="322.63" y2="-46.66"/><line class="cls-2" x1="190.11" y1="130.66" x2="317.61" y2="-54.57"/><line class="cls-2" x1="186.94" y1="123.34" x2="316.8" y2="-68.67"/><line class="cls-2" x1="182.56" y1="117.26" x2="310.58" y2="-74.72"/><line class="cls-2" x1="177.55" y1="109.97" x2="300.2" y2="-70.89"/><line class="cls-2" x1="174.34" y1="107.23" x2="305.54" y2="-76.21"/><line class="cls-2" x1="170.55" y1="99.92" x2="299.89" y2="-85.33"/><line class="cls-2" x1="165.54" y1="92.62" x2="294.88" y2="-92.63"/><line class="cls-2" x1="161.16" y1="86.55" x2="288.67" y2="-98.68"/><line class="cls-2" x1="156.81" y1="82.31" x2="284.92" y2="-102.92"/><line class="cls-2" x1="152.41" y1="74.4" x2="279.91" y2="-110.83"/><line class="cls-2" x1="149.24" y1="67.08" x2="279.1" y2="-124.93"/><line class="cls-2" x1="144.86" y1="61.01" x2="272.88" y2="-130.98"/><line class="cls-2" x1="139.85" y1="53.71" x2="262.5" y2="-127.15"/><line class="cls-2" x1="346.31" y1="356.53" x2="587.42" y2="339.97"/><line class="cls-2" x1="364.1" y1="288.44" x2="399.07" y2="350.4"/><line class="cls-2" x1="419.32" y1="285.98" x2="451.83" y2="346.1"/><line class="cls-2" x1="476.37" y1="287.21" x2="504.6" y2="343.04"/><line class="cls-2" x1="519.93" y1="285.98" x2="549.38" y2="341.81"/><path class="cls-3" d="M83.09,286.73c-2.79-.39-2.07,3-2.07,9.29V400.31c0,6.31-4.56,11.47-10.13,11.47h0c-5.56,0-10.12-5.16-10.12-11.47V296c0-6.31,4.56-11.47,10.12-11.47"/><line class="cls-4" x1="61.09" y1="294.57" x2="80.22" y2="294.65"/><line class="cls-4" x1="61.17" y1="299.78" x2="80.13" y2="299.7"/><line class="cls-4" x1="60.74" y1="303.61" x2="80.48" y2="303.7"/><line class="cls-4" x1="60.91" y1="307.17" x2="80.57" y2="307.26"/><line class="cls-4" x1="61.3" y1="310.65" x2="80.26" y2="310.57"/><line class="cls-4" x1="60.87" y1="314.48" x2="80.61" y2="314.57"/><line class="cls-4" x1="61.04" y1="318.04" x2="80.7" y2="318.13"/><line class="cls-4" x1="61.33" y1="322.09" x2="80.28" y2="322"/><line class="cls-4" x1="60.89" y1="325.91" x2="80.63" y2="326"/><line class="cls-4" x1="61.07" y1="329.48" x2="80.72" y2="329.57"/><line class="cls-4" x1="61.46" y1="332.96" x2="80.41" y2="332.87"/><line class="cls-4" x1="61.02" y1="336.78" x2="80.76" y2="336.87"/><line class="cls-4" x1="61.2" y1="340.35" x2="80.85" y2="340.43"/><line class="cls-4" x1="61.25" y1="344.33" x2="80.21" y2="344.24"/><line class="cls-4" x1="60.82" y1="348.15" x2="80.55" y2="348.24"/><line class="cls-4" x1="60.99" y1="351.72" x2="80.64" y2="351.8"/><line class="cls-4" x1="61.38" y1="355.2" x2="80.34" y2="355.11"/><line class="cls-4" x1="60.95" y1="359.02" x2="80.68" y2="359.11"/><line class="cls-4" x1="61.12" y1="362.59" x2="80.77" y2="362.67"/><line class="cls-4" x1="61.4" y1="366.63" x2="80.36" y2="366.54"/><line class="cls-4" x1="60.97" y1="370.46" x2="80.71" y2="370.54"/><line class="cls-4" x1="61.14" y1="374.02" x2="80.79" y2="374.11"/><line class="cls-4" x1="61.53" y1="377.5" x2="80.49" y2="377.41"/><line class="cls-4" x1="61.1" y1="381.33" x2="80.84" y2="381.41"/><line class="cls-4" x1="61.27" y1="384.89" x2="80.92" y2="384.98"/><line class="cls-4" x1="61.89" y1="388.83" x2="80.85" y2="388.74"/><line class="cls-4" x1="61.46" y1="392.65" x2="81.2" y2="392.74"/><line class="cls-4" x1="61.63" y1="396.22" x2="81.28" y2="396.3"/><line class="cls-4" x1="62.02" y1="399.7" x2="80.98" y2="399.61"/><path class="cls-5" d="M204.91,326.22c1.19-5.88,2-12.58,2-12.58l.6,11.6,1.31-15.85L210,324.58l1.66-19.93,1.67,19,.71-8.66,1,8.34.6-17,1.54,16,.24-11.44L218.83,322"/><ellipse class="cls-1" cx="200.24" cy="319.63" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="199.72" cy="322.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="200.72" cy="325.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="202.72" cy="317.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="203.72" cy="327.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="207.72" cy="327.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="211.72" cy="327.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="215.72" cy="326.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="219.72" cy="325.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="222.72" cy="322.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="221.72" cy="319.59" rx="1.67" ry="1.63"/><path class="cls-6" d="M205.37,318.22a1.6,1.6,0,0,1-1.33-1.76c0-1,.6-1.76,1.33-1.76S206.1,318.22,205.37,318.22Z"/><path class="cls-7" d="M219.53,319.35a1.82,1.82,0,0,0,0-3.52C218.77,315.83,218.77,319.35,219.53,319.35Z"/><path class="cls-8" d="M280.39,288.48c1.57,12,27.65,14.09,13.57,21.91s-16.18,6.78-26.61,17.74S248,342.22,240.74,342.22s-15.65-2.61-26.61,0-26.61,4.69-37.56,3.13-32.35-4.7-37.57-5.22-14.61.52-16.7,1.57-6.78-.53-12.52-10.44-5.74-11-5.21-19.83S95.7,293.7,95.7,293.7l2.6-4.7"/><path class="cls-8" d="M304.91,328.13c-9.91.52-13.56-4.17-16.17,4.7s1,10.43,1,10.43,8.87-2.61,9.92.52,7.3,8.87,9.39,5.74,3.13-12,3.13-12Z"/><ellipse class="cls-9" cx="451" cy="321.09" rx="4.17" ry="6.52"/><polygon class="cls-1" points="483.03 315.08 462.6 316.15 455.79 317.23 456.19 324.21 465.2 323.94 482.83 324.48 482.63 332.27 495.44 331.46 495.04 314 483.03 315.08"/><line class="cls-10" x1="492.42" y1="314.04" x2="493.46" y2="308.82"/><path class="cls-11" d="M491.61,310c.22-1.6.37-3.43.37-3.43l.11,3.16.24-4.32.22,4.14.3-5.43.31,5.17.13-2.36.17,2.27.11-4.64.28,4.37,0-3.12.26,3"/><ellipse class="cls-1" cx="295.09" cy="339.7" rx="7.22" ry="5.83"/><path class="cls-12" d="M404.57,348.48c1.43-6.09,0-15.83,1.43-8.53a22.16,22.16,0,0,0,1.18,4.16c1.28,3.15,2.65,3.15,2.65,3.15l1.43-6.09"/><polyline class="cls-1" points="392.74 335.26 398.3 336.65 400.39 342.22 408.74 345 411.52 349.87"/><path class="cls-13" d="M308.34,296.15c4.07-3.65,6.94,0,6.94,0s-1.44,1.7,1.2,0,6.94-1.94,6.94-1.94l1.2,2.19"/><path class="cls-13" d="M316.48,297.12c-4.31,2.92-1.44,7.55-1.44,7.55"/><polyline class="cls-13" points="315.87 296.68 315.95 294 316.1 289.14"/><path class="cls-13" d="M315.86,294c1.2-.73,3.84-.49,3.84-.49"/><path class="cls-13" d="M312.27,294.37c1.19-.73,3.83-.48,3.83-.48"/><polygon class="cls-14" points="296.04 285.87 427.91 102.55 550.65 283.78 296.04 285.87"/><path d="M292,251.35h.08l2.45,3-2.06,3.2h0l-.13-2.25-6.27.44a5.35,5.35,0,0,0-.56.08,1.39,1.39,0,0,0-.39.17,1,1,0,0,0-.52.84,2.42,2.42,0,0,0,.51,1.23l1.66,2.46-1.33.9-1.66-2.46a5.65,5.65,0,0,1-.62-1.19,3.1,3.1,0,0,1-.19-1.14,2.16,2.16,0,0,1,.3-1,2.68,2.68,0,0,1,.86-.89,3.21,3.21,0,0,1,.79-.37,4.56,4.56,0,0,1,1.06-.19l6.27-.45Zm-6.67,14.07,0-.05,1.3-3.63,3.83.15,0,.05-1.89,1.28,3.53,5.23a1.67,1.67,0,0,0,.85.72,1,1,0,0,0,.84-.17,2.27,2.27,0,0,0,.57-.55,6.58,6.58,0,0,0,.57-1l.94-2,1.46.67-1.1,2.29a5.81,5.81,0,0,1-.71,1.14,3.92,3.92,0,0,1-.87.82,2.93,2.93,0,0,1-1,.43,2.45,2.45,0,0,1-1,0,2.77,2.77,0,0,1-1-.46,3.85,3.85,0,0,1-.92-1l-3.54-5.24ZM297,260.17a15.75,15.75,0,0,0-2.86.32,12.76,12.76,0,0,0-2.81.95l-.84-1.24a8.63,8.63,0,0,1,1.29-.51,11.36,11.36,0,0,1,1.28-.31,11,11,0,0,1,1.3-.14c.45,0,.91,0,1.38,0l-1.56-2.3,1-.67,2.4,3.56Zm3.8,4.12,0,.06-3.81.71-1.81-3.32,0-.05,2,1,2.57-5.45a4.33,4.33,0,0,0,.37-1,.93.93,0,0,0-.16-.73,1.06,1.06,0,0,0-.64-.46,3.36,3.36,0,0,0-1.06-.06l-2.93.17-.08-1.59,2.92-.16a9.34,9.34,0,0,1,1.06,0,3.07,3.07,0,0,1,.85.15,1.92,1.92,0,0,1,.69.37,2.9,2.9,0,0,1,.59.65,2.76,2.76,0,0,1,.35.74,2.46,2.46,0,0,1,.07.77,3.33,3.33,0,0,1-.18.84,8.84,8.84,0,0,1-.4,1l-2.57,5.43Z"/><path class="cls-10" d="M314.81,307.05s4.16,7.78,2.61,16.05c9.87,7.31,14,15.1,5.3,19.85,8.73-4.75,11.16-.2,7,10.31,9-1.4,11.46,3.15,11.46,3.15L371,412.24"/><line class="cls-10" x1="28.91" y1="99.43" x2="35.17" y2="285.87"/><polyline class="cls-10" points="38.65 272.65 50.48 272.65 50.48 284.48"/><rect class="cls-15" x="122.13" y="217" width="7.65" height="9.74"/><rect class="cls-16" x="121.43" y="230.91" width="9.04" height="17.39"/><polyline class="cls-15" points="114.48 230.91 109.61 237.17 121.44 233.7"/><polyline class="cls-15" points="137.44 231.61 142.3 235.78 143 244.83"/><line class="cls-15" x1="124.22" y1="249.7" x2="124.91" y2="265"/><polyline class="cls-15" points="129.09 251.78 131.87 262.91 129.78 270.56"/><polyline class="cls-16" points="120.04 205.17 125.61 214.91 129.78 203.09"/><rect class="cls-17" x="85.57" y="156.82" width="6.52" height="8.03"/><rect class="cls-18" x="84.98" y="168.3" width="7.7" height="14.35"/><polyline class="cls-17" points="79.05 168.3 77.9 173.47 84.98 170.6"/><polyline class="cls-17" points="93.61 168.87 95.75 172.32 98.35 179.78"/><line class="cls-17" x1="87.35" y1="183.79" x2="87.94" y2="196.42"/><polyline class="cls-17" points="91.5 185.51 93.87 194.7 92.09 201.01"/><polyline class="cls-18" points="83.79 147.07 88.53 155.1 92.09 145.35"/><text class="cls-19" transform="translate(310.23 282.2)">Lo</text><path class="cls-20" d="M388.81,92.47c.65,0,7.85-.13,12.05,4.23a8.57,8.57,0,0,1,2.52,6.77,8.09,8.09,0,0,1-2,5.92c-3.64,4.33-10.5,4.63-11.21,4.65,2.81-1.27,4.36-3.62,3.93-5.92-.52-2.71-3.54-4.06-3.93-4.23-5.23,0-10.46-1.52-15.69-1.52l-.56-1.76,14.85-1.37c2.75.05,4.92-1.69,4.76-3.6S391.34,92.41,388.81,92.47Z"/><rect class="cls-20" x="404.22" y="99.45" width="8.69" height="3.6"/><path class="cls-20" d="M343.26,93.64c.65,0,7.85-.12,12.05,4.23a8.63,8.63,0,0,1,2.52,6.77,8.12,8.12,0,0,1-2,5.93c-3.64,4.32-10.5,4.63-11.21,4.65,2.81-1.28,4.36-3.62,3.92-5.92-.51-2.71-3.53-4.07-3.92-4.23-5.23,0-10.46-1.52-15.7-1.52l-.56-1.76,14.86-1.38c2.74,0,4.92-1.69,4.76-3.59S345.79,93.59,343.26,93.64Z"/><rect class="cls-20" x="358.67" y="100.62" width="8.69" height="3.6"/><path class="cls-20" d="M298.74,95c.65,0,7.84-.13,12.05,4.23a8.6,8.6,0,0,1,2.52,6.76,8.12,8.12,0,0,1-2,5.93c-3.64,4.32-10.5,4.63-11.21,4.65,2.81-1.28,4.36-3.62,3.92-5.92-.51-2.71-3.53-4.07-3.92-4.23-5.23,0-10.47-1.52-15.7-1.52l-.56-1.76,14.86-1.38c2.74.06,4.91-1.69,4.76-3.59S301.26,95,298.74,95Z"/><rect class="cls-20" x="314.15" y="102.02" width="8.69" height="3.6"/><path class="cls-20" d="M247.93,97.21c.65,0,7.85-.13,12.05,4.23a8.6,8.6,0,0,1,2.53,6.77,8.16,8.16,0,0,1-2,5.92c-3.64,4.33-10.5,4.63-11.22,4.65,2.82-1.28,4.36-3.62,3.93-5.92-.52-2.71-3.54-4.06-3.93-4.23-5.23,0-10.46-1.52-15.69-1.52l-.56-1.76L247.93,104c2.75,0,4.92-1.7,4.77-3.6S250.46,97.15,247.93,97.21Z"/><rect class="cls-20" x="263.35" y="104.19" width="8.69" height="3.6"/><path class="cls-20" d="M202,98.51c.65,0,7.85-.12,12.05,4.23a8.58,8.58,0,0,1,2.52,6.77,8.09,8.09,0,0,1-2,5.92c-3.64,4.33-10.5,4.64-11.21,4.66,2.81-1.28,4.36-3.62,3.93-5.92-.52-2.71-3.54-4.07-3.93-4.23-5.23,0-10.46-1.52-15.69-1.52l-.56-1.76L202,105.28c2.75,0,4.92-1.69,4.76-3.59S204.57,98.46,202,98.51Z"/><rect class="cls-20" x="217.45" y="105.49" width="8.69" height="3.6"/><polygon onmouseover="fillDots()" id="fillDots" class="cls-21" points="360.04 -1.44 175.7 2.74 139.85 53.71 293.96 280.3 427.91 102.55 360.04 -1.44"/><line class="cls-22" x1="294.65" y1="94.22" x2="286.3" y2="181.17"/></svg>'} var i; var randomX; var randomY; var randomDot = Math.floor(Math.random() * 10) + 1; var point; var array01 = []; function fillDots(){document.querySelector("#fillDots").setAttribute('onmouseover','deleteDots()'); var interval01 = setInterval(function () { let randomX = Math.floor(Math.random() * 427) + 139, randomY = Math.floor(Math.random() * 280) + 1; point = document.querySelector("#Layer_1").createSVGPoint(); point.x = randomX; point.y = randomY; if (document.querySelector("#fillDots").isPointInFill(point)) { //isPointInStroke let ellipse = document.createElementNS( "http://www.w3.org/2000/svg", "ellipse" ); document.querySelector("#Layer_1").appendChild(ellipse); ellipse.setAttribute("rx", "5"); ellipse.setAttribute("ry", "5"); ellipse.setAttribute("cx", randomX + "px"); ellipse.setAttribute("cy", randomY + "px"); ellipse.style.fill = "green"; ellipse.style.opacity = "50%"; ellipse.setAttribute('class','dotClass'); } }, 125); setTimeout(function(){clearInterval(interval01);},4000); } function deleteDots(){var ellipseClass = $(".dotClass").toArray();array01.push(ellipseClass[randomDot]);console.log(array01)}

 <:doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <button onClick="levelOneGF()" id="setLevelOneButton">Level One</button> <script src="Js/levelOneGF.js"></script> </body> </html>

 function levelOneGF(){document.body.innerHTML='<svg id="Layer_1" height="400" width="700" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 400"><defs><style>.cls-1,.cls-11,.cls-12,.cls-2,.cls-3,.cls-5,.cls-6,.cls-7{fill:#fff;}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-18,.cls-2,.cls-20,.cls-21,.cls-22,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke:#000;stroke-miterlimit:10;}.cls-2,.cls-4{stroke-width:0.5px;}.cls-3{stroke-width:0.53px;}.cls-10,.cls-13,.cls-20,.cls-22,.cls-4,.cls-8,.cls-9{fill:none;}.cls-21,.cls-22,.cls-5{stroke-width:0.75px;}.cls-6{stroke-width:0.92px;}.cls-7,.cls-8{stroke-width:0.94px;}.cls-9{stroke-width:0.58px;}.cls-11{stroke-width:0.17px;}.cls-12{stroke-width:0.55px;}.cls-13,.cls-14{stroke-width:0.35px;}.cls-14{opacity:0.28;}.cls-15,.cls-16{fill:blue;}.cls-16{stroke-width:0.88px;}.cls-17,.cls-18{fill:#ed1e79;}.cls-17{stroke-width:0.84px;}.cls-18{stroke-width:0.74px;}.cls-19{font-size:24px;font-family:Webdings;}.cls-20{stroke-width:0.35px;}.cls-21{opacity:0.33;}</style></defs><path class="cls-1" d="M104,4.39l201.5,295.34s5,7.3,13,9.75c1.9,12.14,6.88,19.43,15.13,13.89-8.25,5.54-5.34,9.81,5.89,11C334.11,341.7,337,346,337,346l35.67,52.29"/><line class="cls-1" x1="362.88" y1="1.93" x2="623" y2="392.73"/><line class="cls-1" x1="2.75" y1="97.64" x2="694.78" y2="98.25"/><line class="cls-1" x1="0.91" y1="289.05" x2="692.94" y2="284.14"/><line class="cls-2" x1="297.23" y1="283.53" x2="427.91" y2="102.55"/><line class="cls-2" x1="292.94" y1="278.01" x2="424.23" y2="97.02"/><line class="cls-2" x1="288.64" y1="271.26" x2="419.93" y2="92.12"/><line class="cls-2" x1="284.35" y1="266.35" x2="415.64" y2="84.14"/><line class="cls-2" x1="280.67" y1="260.21" x2="411.34" y2="76.17"/><line class="cls-2" x1="276.37" y1="252.85" x2="406.44" y2="69.42"/><line class="cls-2" x1="270.24" y1="244.88" x2="402.75" y2="62.06"/><line class="cls-2" x1="264.72" y1="237.52" x2="397.23" y2="54.69"/><line class="cls-2" x1="257.97" y1="228.31" x2="392.33" y2="46.72"/><line class="cls-2" x1="253.06" y1="221.56" x2="386.8" y2="39.97"/><line class="cls-2" x1="249.38" y1="214.2" x2="381.28" y2="30.77"/><line class="cls-2" x1="244.47" y1="206.84" x2="376.37" y2="23.4"/><line class="cls-2" x1="240.18" y1="200.71" x2="370.24" y2="17.27"/><line class="cls-2" x1="235.88" y1="196.41" x2="366.56" y2="12.98"/><line class="cls-2" x1="231.59" y1="188.44" x2="361.65" y2="5"/><line class="cls-2" x1="228.52" y1="181.07" x2="361.04" y2="-9.11"/><line class="cls-2" x1="224.23" y1="174.94" x2="354.9" y2="-15.25"/><line class="cls-2" x1="219.32" y1="167.58" x2="344.47" y2="-11.56"/><line class="cls-2" x1="212.04" y1="163.48" x2="343.25" y2="-19.95"/><line class="cls-2" x1="208.25" y1="156.17" x2="337.6" y2="-29.08"/><line class="cls-2" x1="203.24" y1="148.88" x2="332.59" y2="-36.37"/><line class="cls-2" x1="198.87" y1="142.81" x2="326.37" y2="-42.42"/><line class="cls-2" x1="194.51" y1="138.57" x2="322.63" y2="-46.66"/><line class="cls-2" x1="190.11" y1="130.66" x2="317.61" y2="-54.57"/><line class="cls-2" x1="186.94" y1="123.34" x2="316.8" y2="-68.67"/><line class="cls-2" x1="182.56" y1="117.26" x2="310.58" y2="-74.72"/><line class="cls-2" x1="177.55" y1="109.97" x2="300.2" y2="-70.89"/><line class="cls-2" x1="174.34" y1="107.23" x2="305.54" y2="-76.21"/><line class="cls-2" x1="170.55" y1="99.92" x2="299.89" y2="-85.33"/><line class="cls-2" x1="165.54" y1="92.62" x2="294.88" y2="-92.63"/><line class="cls-2" x1="161.16" y1="86.55" x2="288.67" y2="-98.68"/><line class="cls-2" x1="156.81" y1="82.31" x2="284.92" y2="-102.92"/><line class="cls-2" x1="152.41" y1="74.4" x2="279.91" y2="-110.83"/><line class="cls-2" x1="149.24" y1="67.08" x2="279.1" y2="-124.93"/><line class="cls-2" x1="144.86" y1="61.01" x2="272.88" y2="-130.98"/><line class="cls-2" x1="139.85" y1="53.71" x2="262.5" y2="-127.15"/><line class="cls-2" x1="346.31" y1="356.53" x2="587.42" y2="339.97"/><line class="cls-2" x1="364.1" y1="288.44" x2="399.07" y2="350.4"/><line class="cls-2" x1="419.32" y1="285.98" x2="451.83" y2="346.1"/><line class="cls-2" x1="476.37" y1="287.21" x2="504.6" y2="343.04"/><line class="cls-2" x1="519.93" y1="285.98" x2="549.38" y2="341.81"/><path class="cls-3" d="M83.09,286.73c-2.79-.39-2.07,3-2.07,9.29V400.31c0,6.31-4.56,11.47-10.13,11.47h0c-5.56,0-10.12-5.16-10.12-11.47V296c0-6.31,4.56-11.47,10.12-11.47"/><line class="cls-4" x1="61.09" y1="294.57" x2="80.22" y2="294.65"/><line class="cls-4" x1="61.17" y1="299.78" x2="80.13" y2="299.7"/><line class="cls-4" x1="60.74" y1="303.61" x2="80.48" y2="303.7"/><line class="cls-4" x1="60.91" y1="307.17" x2="80.57" y2="307.26"/><line class="cls-4" x1="61.3" y1="310.65" x2="80.26" y2="310.57"/><line class="cls-4" x1="60.87" y1="314.48" x2="80.61" y2="314.57"/><line class="cls-4" x1="61.04" y1="318.04" x2="80.7" y2="318.13"/><line class="cls-4" x1="61.33" y1="322.09" x2="80.28" y2="322"/><line class="cls-4" x1="60.89" y1="325.91" x2="80.63" y2="326"/><line class="cls-4" x1="61.07" y1="329.48" x2="80.72" y2="329.57"/><line class="cls-4" x1="61.46" y1="332.96" x2="80.41" y2="332.87"/><line class="cls-4" x1="61.02" y1="336.78" x2="80.76" y2="336.87"/><line class="cls-4" x1="61.2" y1="340.35" x2="80.85" y2="340.43"/><line class="cls-4" x1="61.25" y1="344.33" x2="80.21" y2="344.24"/><line class="cls-4" x1="60.82" y1="348.15" x2="80.55" y2="348.24"/><line class="cls-4" x1="60.99" y1="351.72" x2="80.64" y2="351.8"/><line class="cls-4" x1="61.38" y1="355.2" x2="80.34" y2="355.11"/><line class="cls-4" x1="60.95" y1="359.02" x2="80.68" y2="359.11"/><line class="cls-4" x1="61.12" y1="362.59" x2="80.77" y2="362.67"/><line class="cls-4" x1="61.4" y1="366.63" x2="80.36" y2="366.54"/><line class="cls-4" x1="60.97" y1="370.46" x2="80.71" y2="370.54"/><line class="cls-4" x1="61.14" y1="374.02" x2="80.79" y2="374.11"/><rect class="cls-20" x="263.35" y="104.19" width="8.69" height="3.6"/><path class="cls-20" d="M202,98.51c.65,0,7.85-.12,12.05,4.23a8.58,8.58,0,0,1,2.52,6.77,8.09,8.09,0,0,1-2,5.92c-3.64,4.33-10.5,4.64-11.21,4.66,2.81-1.28,4.36-3.62,3.93-5.92-.52-2.71-3.54-4.07-3.93-4.23-5.23,0-10.46-1.52-15.69-1.52l-.56-1.76L202,105.28c2.75,0,4.92-1.69,4.76-3.59S204.57,98.46,202,98.51Z"/><rect class="cls-20" x="217.45" y="105.49" width="8.69" height="3.6"/><polygon onmouseover="fillDots()" id="fillDots" class="cls-21" points="360.04 -1.44 175.7 2.74 139.85 53.71 293.96 280.3 427.91 102.55 360.04 -1.44"/><line class="cls-22" x1="294.65" y1="94.22" x2="286.3" y2="181.17"/></svg>'} var i; var randomX; var randomY; var randomDot = Math.floor(Math.random() * 10) + 1; var point; var array01 = []; function fillDots(){document.querySelector("#fillDots").setAttribute('onmouseover','deleteDots()'); var interval01 = setInterval(function () { let randomX = Math.floor(Math.random() * 427) + 139, randomY = Math.floor(Math.random() * 280) + 1; point = document.querySelector("#Layer_1").createSVGPoint(); point.x = randomX; point.y = randomY; if (document.querySelector("#fillDots").isPointInFill(point)) { //isPointInStroke let ellipse = document.createElementNS( "http://www.w3.org/2000/svg", "ellipse" ); document.querySelector("#Layer_1").appendChild(ellipse); ellipse.setAttribute("rx", "5"); ellipse.setAttribute("ry", "5"); ellipse.setAttribute("cx", randomX + "px"); ellipse.setAttribute("cy", randomY + "px"); ellipse.style.fill = "green"; ellipse.style.opacity = "50%"; ellipse.setAttribute('class','dotClass'); } }, 125); setTimeout(function(){clearInterval(interval01);},4000); } function deleteDots(){var ellipseClass = $(".dotClass").toArray();console.log(ellipseClass)} //setInterval(function(){randomX = Math.floor(Math.random() * 220) + 195;randomY = Math.floor(Math.random() * 180) + 90;var ellipse=document.createElementNS("http://www.w3.org/2000/svg", 'ellipse');document.querySelector("#Layer_1").appendChild(ellipse);ellipse.setAttribute('rx','5');ellipse.setAttribute('ry','5');ellipse.setAttribute('cx',randomX+'px');ellipse.setAttribute('cy',randomY+'px');ellipse.style.fill='red'},1000);

 <:doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <button onClick="levelOneGF()" id="setLevelOneButton">Level One</button> <script src="Js/levelOneGF.js"></script> </body> </html>

I hover over the lined area and about ten green dots appear, I set those green dots to an array, what I would like to do now is delete about half maybe a third of them at the least when I hover back over them. I tried using removeAttributeNode, and I feel like this may work. so if there is a solution using remove attribute node that would be best. Thank you.

Answer 1

Based on your example, you use a .dotClass to identify the Ellipse that's been added and when you trigger deleteDots function, you select the class and set it to array by using

var ellipseClass = $(".dotClass").toArray()

Then what you need to remove the Ellipse is just call

ellipseClass[i].remove(); // i is the index that you want to remove

Here's the updated results on JSFiddle