Создать элемент, затем удалить элемент

Question

Я пытаюсь создать элемент, который затем удаляется через определенное время.

Мой код работает, когда я нажимаю кнопку один раз, он удаляет элемент через 2 секунды, но если янесколько раз нажмите кнопку, чтобы функция setTimeout перестала работать.

function displayText(){
    var element = document.createElement("P");
    element.id = "text1";
    element.appendChild(document.createTextNode('Hello'));
    document.getElementById('Div1').appendChild(element);
    setTimeout(function(){
        document.getElementById("text1").style.display = "none";
    }, 2000);
}

Answer 1

Наличие нескольких идентификаторов в одном документе - неверный HTML - при выборе элемента с id, равным text1 в setTimeout, будет выбран только первый элемент с этим идентификатором.Вашему вновь созданному элементу вообще не нужен идентификатор - вы можете просто сослаться на переменную element в замыкании и установить его стиль.

Вам также может быть проще присвоить элементу textContent чем использовать createTextNode:

function displayText(){
  var element = document.createElement("P");
  element.textContent = 'Hello';
  document.getElementById('Div1').appendChild(element);

  setTimeout(
    function(){
      element.style.display = "none";
    }, 2000);
}

Обратите внимание, что

element.style.display = "none";

фактически не удаляет элемент - если вы хотите удалить элемент из DOM, используйте

element.remove();