javascript - 如何在 div 出现后一秒钟删除它？

Question

我正在尝试制作背景效果。在按键时，它会创建一个半秒后淡出的 div。每次按下一个键，它都会创建一个带有新 id 的新 div。如何在触发后半秒删除每个 div？

我忘了说，我有一个函数可以将 document.getElementById('id') 缩短为 $('id')。我没有使用 jQuery。

到目前为止，这是我的代码。

function $(e) {
  return document.getElementById(e)
}

let circles = 0;
onkeypress = () => {
  document.body.insertAdjacentHTML('beforeend', `<div class="effect" id="l${circles}"></div>`)
  setTimeout(function(){
    $(`l${circles}`).remove()
  },500)
  circles++
}

Answer 1

如果您使用 setTimeout，它将在 500 毫秒后使用计数器的值，这意味着它不再等于用于创建元素 ID 的计数器。

你应该只使用:

onkeypress = () => {
    var el = document.createElement("div");
    el.className = "effect";
    document.body.appendChild(el);
    setTimeout(function(){
        document.body.removeChild(el);
    },500)
}