title: Javascript I want to remove the element in a list every second but it doesn’t remove it
body: <p>The result I want to achieve:keep clicking the mouse and a bunch of little “heart” images will pop up according to the coordinates of each click of the mouse. In other words, one click will pop up one image on the coordinates of your mouse.</p>
  
  <p>Then after 1 second, the image begin to disappear.The earlier appeared image will also disappear early.</p>
  
  <p>My problem is: the image will not disappear appropriately unless I delete the <code>clearInterval</code> code. Here’s the code:</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>// when click, an image pop up
  // use addEventListener to do so 
  // let timer = 0;
  let imgList = [];
  document.addEventListener("click",function(event){
      let img = document.createElement("img");
      img.style.position = "absolute";
      img.style.left = (event.clientX - 32) + "px";
      img.style.top = (event.clientY - 32) + "px";
      img.src = "https://placehold.it/64x64.png";
      document.body.appendChild(img);
  
      imgList.push({
          img:img,
          opacity:1,
          scale:1,
          frame:0
      });
  });
  
  var timer = setInterval(draw, 1000);
  
  function draw(){
      if (imgList.length &lt; 1) {
          clearInterval(timer);
          timer = null;
      }
      else {
          imgList[0].img.remove();
          imgList.splice(0, 1);
      }
  }</code></pre>
  </div>
  </div>
  </p>