Удаление элемента по истечению времени

@KostyaAnt · Регистрация: 26.04.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте , я пытаюсь сделать систему уведомлений , у меня есть контейнер

HTML5
1
2
3
4
5
<div class="jumbotron" id="Contain">
      .............................
        <div class="NotificationError">message+</div >
     ...............................
    </div>

В него я буду добавлять свои уведомления их может быть до 3 штук. Задача в том чтобы удалить данный блок div через 5 секунд например. Получается что при создании элемента

JavaScript
1
2
3
4
    let elem1;
    elem1=doc.createElement("div");
    elem1.setAttribute("class" , "NotificationError")
    let elem2 =doc.getElementById('Contain')

нужно добавить в него функцию которая запустит таймер об его удалении

JavaScript
1
2
3
setTimeout(function () {
    $('.NotificationError')[0].remove();
}, 2000)

Как я могу это сделать ?

@shvyrevvg · 07.11.2019, 19:19

KostyaAnt, ну и устанавливайте таймер после добавления

JavaScript
1
2
3
4
5
6
7
let elem1 = doc.createElement("div");
elem1.setAttribute("class" , "NotificationError");
let elem2 = doc.getElementById('Contain');
elem2.append(elem1);
setTimeout(function () {
   elem1.remove();
}, 2000)

@KostyaAnt · 07.11.2019, 19:23 **[ТС]**

Так а если я в это же время создам новое уведомление , объект elem1 будет обновлен и удалиться уже не он , функция удаления должна висеть именно на объекте который был создан , если у меня 3 уведомления одновременно вылетит как он узнает какое ему удалять. Тоесть таймер должен быть отдельно для каждого элемента

@shvyrevvg · 07.11.2019, 19:27

Сообщение от KostyaAnt

если у меня 3 уведомления одновременно вылетит

KostyaAnt, покажите код.

@KostyaAnt · 07.11.2019, 19:34 **[ТС]**

Вот , пока что по нажатию на кнопку я добавляю в контейнер Уведомление . Задача стоит в том чтобы каждое уведомление удалилось через ..... после его создания

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body>
    <button onClick="AddNotifiction()">Добавляю уведомление</button>
    <div class="jumbotron" id="Contain">
       
    </div>
</body>
<script>
let masNotification=[];
 
setTimeout(function () {
    $('.NotificationAccept')[0].remove();
}, 2000)
 
function AddNotifiction()
{
    if(masNotification.length<3)
    {
        doc=document
        let elem1;
        elem1=doc.createElement("div");
        
        elem1.setAttribute("class" , "NotificationAccept")
 
        masNotification.push(elem1);
 
        let elem2 =doc.getElementById('Contain')
 
        elem2.append(elem1);   
    }         
}
</script>
</html>

@shvyrevvg · 07.11.2019, 19:40

KostyaAnt, добавьте таймер и посмотрите.

@KostyaAnt · 07.11.2019, 19:43 **[ТС]**

не в курил как это получилось , но мне понравилось , Спасибо за ответ помогло

@shvyrevvg · 07.11.2019, 19:47

KostyaAnt, при каждом вызове функции elem1 заново создается, а не обновляется.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@KostyaAnt 0 / 0 / 0 Регистрация: 26.04.2016 Сообщений: 31
	07.11.2019, 19:23 [ТС]
	Так а если я в это же время создам новое уведомление , объект elem1 будет обновлен и удалиться уже не он , функция удаления должна висеть именно на объекте который был создан , если у меня 3 уведомления одновременно вылетит как он узнает какое ему удалять. Тоесть таймер должен быть отдельно для каждого элемента 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	07.11.2019, 19:40
	KostyaAnt, добавьте таймер и посмотрите. 0

@KostyaAnt 0 / 0 / 0 Регистрация: 26.04.2016 Сообщений: 31
	07.11.2019, 19:43 [ТС]
	не в курил как это получилось , но мне понравилось , Спасибо за ответ помогло 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	07.11.2019, 19:47
	KostyaAnt, при каждом вызове функции elem1 заново создается, а не обновляется. 0

Удаление элемента по истечению времени

Решение