Как получить id каждого блока и закрыть их?

Question

[Альберт]

Здравствуйте! Такой вопрос:

У меня есть уведомления которые появляются в углу экрана, их я генерирую с помощью js чтобы их было несколько и они могли появляться друг под другом. Но не могу их закрыть с помощью кнопки закрыть.

Вот код:

function notify(type,message){
  (()=>{
    var n = document.createElement("div");
    var id = Math.random().toString(36).substr(2,10);
    n.setAttribute("id",id);
    n.classList.add("notification",type);
    n.classList.add("fade_out");
    n.innerHTML = message;
    document.getElementById("notification-area").appendChild(n);
    setTimeout(()=>{
    var notifications = document.getElementById("notification-area").getElementsByClassName("notification");
      for(var i=0;i<notifications.length;i++){
        if(notifications[i].getAttribute("id") == id){
          notifications[i].remove();
          break;
        }
      }
    },50000);
  })();
}

Появляется и закрывается сам автоматически через 5 сек. Но как закрыть с помощью кнопки?

$(document).on('click', '#notification-area span', function () {

var a = $('.notification').attr('id');

 if (a) {
    alert(a);
    }

});

Отслеживаю событие по клику и никак не могу закрыть нужный мне блок с уведомлением.Как можно сделать? Может кто помочь?

Comments

[Spartak (Web-StyleStudio)]

Напишите html код уведомления

Answer 1

[1 2]

В чем сложность?
Обрабатывать нажатие на кнопку и потом работаешь с родительским элементом:
div.closest("#block");
Или для кнопки можешь задать такой же id, как и для блока.

Comments

[Альберт]

Если не трудно можете написать код для моего случая, код чуть выше я скинул. Не смогу разобраться сам.. поэтому пишу

[1 2]

Альберт. Можешь скинуть структуру HTML, которая получается у данного блока?

[Альберт]

Спасибо! Догадался уже))

$(this).closest('.notification').remove();

[1 2]

Альберт. Рад был помочь

Answer 2

[Александр Лелека]

Попробуй закрывать именно родительский блок через parents()

$(document).on('click', '#notification-area span', function () {
// у всех блоков должен быть класс notification
var emelent = $(this).parents('.notification');

// теперь можем работать с данным блоков, например закрыть с помощью hide()
element.hide();
});