Удалить сообщение через 5 секунд с помощью класса в JavaScript

Чтобы удалить сообщение через 5 секунд с помощью класса JavaScript, вы можете использовать один из следующих методов:

Метод 1: функция setTimeout()

// HTML
<div class="message">This message will be removed after 5 seconds.</div>
// JavaScript
setTimeout(function() {
  var message = document.querySelector('.message');
  if (message) {
    message.remove();
  }
}, 5000);

Метод 2: функция setInterval()

// HTML
<div class="message">This message will be removed after 5 seconds.</div>
// JavaScript
var countdown = 5;
var interval = setInterval(function() {
  var message = document.querySelector('.message');
  if (countdown <= 0) {
    clearInterval(interval);
    if (message) {
      message.remove();
    }
  } else {
    countdown--;
  }
}, 1000);

Метод 3: classList и setTimeout()

// HTML
<div class="message">This message will be removed after 5 seconds.</div>
// JavaScript
var message = document.querySelector('.message');
message.classList.add('fadeout');
setTimeout(function() {
  if (message) {
    message.remove();
  }
}, 5000);

В методе 1 функция setTimeout() используется для выполнения кода внутри функции после указанной задержки в 5000 миллисекунд (5 секунд). Он выбирает элемент сообщения с помощью document.querySelector() и удаляет его с помощью метода remove().

Метод 2 использует функцию setInterval() для уменьшения переменной обратного отсчета каждую секунду. Когда обратный отсчет достигает 0, интервал очищается и элемент сообщения удаляется.

Метод 3 добавляет к элементу сообщения CSS-класс «fadeout», который можно использовать для применения анимации затухания. Функция setTimeout() используется для удаления элемента через 5 секунд.