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.

I deleted it because I figured it’d be easier to start from here with the full array. I basically picked randomly out of this array and pushed those numbers into a empty array and then I put it in an interval. It was messy and wasn’t working. The solution doesn’t have to contain removeAttributeNode but it would be neat if it did. I’m coming back to stack in the morning as it is time for sleep on the east coast. Thank you — , Jan 26 '21 at 02:25

score 0 · Accepted Answer · answered Jan 26 '21 at 06:32

0

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

answered Jan 26 '21 at 06:32

Kyojimaru

2,694
1
14
22

I would like to remove multiple dots at a time, half the dots at once but at least one third of them at one time. Also, in the fiddle example, you're using ellipseClass[0] instead of ellipseClass[i] that you have here in the answer. Are you saying I should use a for loop? Thank you. – Jan 26 '21 at 13:12
I ended up using setTimeout(function(){document.querySelector("#fillDots").setAttribute('onclick','fillDots()');var ellipseClass = $(".dotClass").toArray();for(i=0;i – Jan 26 '21 at 16:53
Thank you for your suggestion – Jan 26 '21 at 16:54
@mathewstratton sorry for the late response, yes I meant for you to remove the index based on your preference either using for loop and delete from index `0-n` or loop for `x times` and do some random index based on the array length or any other way that you'd like to use. And for the Fiddle example, I used `[0]` just for some example, sorry that it's not clear enough as per your requirement – Kyojimaru Jan 27 '21 at 02:53
it's okay I used your suggestion to find the answer – Jan 27 '21 at 12:14

How do I remove these green dots randomly?

1 Answers1