我如何在一个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，它将在500ms之后使用counter的值，这意味着它不再等于用于创建元素ID的计数器。

您只需使用：

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