title: Add disappearing circle element to click function
body: <p>I have a page where circles randomly appear in a certain place.
  When you click on the circle, it disappears.</p>
  <p>So, I have another <code>circle-smoke</code>, and I want that when the clicked circle disappears, this circle with the <code>circle-smoke</code> class appears in its place, and also dissolves in just a second.</p>
  <p>I tried to add new element creation to my click function, but it didn't work</p>
  <pre><code>let div1 = document.createElement('div');
  div1.classList.add(&quot;circle-smoke&quot;);
  </code></pre>
  <p>Isn’t it possible for the smoky circle to hold on a little more and steam out? The first one quickly disappeared.</p>
  <p>In general, the whole point is to remain like this in the place of the disappearing circle, and then also disappear</p>
  <p><a href="https://i.stack.imgur.com/jZRnG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jZRnG.png" alt="enter image description here" /></a></p>
  <p>How can I best implement this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//create circle
  
  var clickEl = document.getElementById("clicks");
  
  var spawnRadius = document.getElementById("spawnRadius");
  var spawnArea = spawnRadius.getBoundingClientRect();
  const circleSize = 95; // Including borders
  
  function createDiv(id, color) {
      let div = document.createElement('div');
      div.setAttribute('class', id);
      if (color === undefined) {
          let colors = ['#ebc6df', '#ebc6c9', '#e1c6eb', '#c6c9eb', '#c6e8eb', '#e373fb', '#f787e6', '#cb87f7', '#87a9f7', '#87f7ee'];
          randomColor = colors[Math.floor(Math.random() * colors.length)];
          div.style.borderColor = randomColor;
      }
      else {
          div.style.borderColor = color;
      }
      
      // Randomly position circle within spawn area
      div.style.top = `${Math.floor(Math.random() * (spawnArea.height - circleSize))}px`;
      div.style.left = `${Math.floor(Math.random() * (spawnArea.width - circleSize))}px`;
      div.classList.add("circle", "animation");
  
      // Add click handler
      let clicked = false;
      div.addEventListener('click', (event) =&gt; {
          if (clicked) { return; } // Only allow one click per circle
          clicked = true;
          
          div.style.animation = 'Animation 200ms linear forwards';
          setTimeout(() =&gt; { spawnRadius.removeChild(div); }, 220);
      });
      
      spawnRadius.appendChild(div);
  }
  
  let i = 0;
  
  const rate = 3000;
  
  setInterval(() =&gt; {
      i += 1;
      createDiv(`circle${i}`);
  }, rate);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #0f0f0f;
  }
  
  .circle {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    background-color: #0f0f0f;
    border: 3px solid #000;
    position: absolute;
  }
  
  #spawnRadius {
      top: 55%;
      height: 250px;
      width: 500px;
      left: 50%;
      white-space: nowrap;
      position: absolute;
      transform: translate(-50%, -50%);
      background: #0f0f0f;
      border: 2px solid #ebc6df;
  }
  
  @keyframes Animation {
      0% {
          transform: scale(1);
          opacity: 1;
      }
      50% {
          transform: scale(.8);
      }
      100% {
          transform: scale(1);
          opacity: 0;
      }
  }
  
  .circle-smoke {
    position: relative;
    height: 500px;
    width: 500px;
    filter: url(#wave);
    transform: scale(0.3);
  }
  .circle-smoke::before {
    content: "";
    position: absolute;
    top: 100px;
    left: 100px;
    right: 100px;
    bottom: 100px;
    border: 10px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 50px #ebc6df, inset 0 0 50px #ebc6df;
    filter: url(#wave) blur(10px);
  }
  
  svg {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;div id="spawnRadius"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>