Как правильно написать код, что-бы он удалял именно это?

Question

[Михаил Р.]

Всем привет!
Необходимо было написать код на JQuery, который по клику по форме будет вызывать функцию, которая создает всплывающее сообщение. Создал функцию, на первый взгляд - все гуд!
Функция с сообщением содержит в себе:

• Создать родительский контейнер.
  
• Поместить в родительски контейнер, контейнер с сообщением.
  
• И если была команда (передается в параметрах к функции), спрятать сообщение и далее его удалить.
  

Проблема:
При клике по форме > единоразово вызывается сообщение (все гуд!) > кликаем еще раз - единоразово вызывает еще одно (все гуд!). НООО, когда подходит время удаления первого сообщения, скрипт удаляет сразу все, а не только первое. И по сути, это логично, ибо функция удаления относится к элементу, который имеет N класс, и соотвественно скрипт удаляет все на своем пути с таким классом.
Вопрос:
Как сделать 'адресное' удаление именно ЭТОГО сообщения. Так сказать, что-бы в момент клика, функция распространялась лишь на ЭТОТ созданный элемент и проводила все процедуры лишь с ним. Разумеется, при следующем клике - функция независимо будет работать именно для следующего элемента...

Код для наглядности:

function create_alert(alertParams) {

            // проверяем наличие родительского контейнера на странице
            var search = $('div#container-alert')[0];

            // если родительского контейнера нет, то создаем его
            if(!search) {
                $('body').append('<div id="container-alert"></div>');
            };

            // создаем контейнер под сообщение и размещаем его внутри родительского контейнера
            $('div#container-alert')
                .prepend('<div class="alert animated ' + alertParams['classAlert'] + ' ' + alertParams['showClass'] + '"></div>');

            // добавляем текст в сообщение
            $('div.alert').html(alertParams['text']);

            // при необходимости, скрываем сообщение по таймеру
            if(alertParams['hideClass']) {
                setTimeout(function () {
                    $('div.alert').removeClass(alertParams['showClass']);
                    $('div.alert').addClass(alertParams['hideClass']);

                    // при необходимости, удаляем сообщение спустя 3 секунды
                    if(alertParams['removeAlert']) {
                        setTimeout(function () {
                            $('div.alert').remove();
                        }, 3000);
                    };

                }, alertParams['hideTime']);
            };

        };

        var alertParams = {
            'text': 'Предупреждение системы',
            'classAlert': 'alert-danger',
            'showClass': 'zoomInRight',
            'hideTime': 3000,
            'hideClass': 'zoomOutRight',
            'removeAlert': 1
        };

        $('#login-form').on('click', function () {
            create_alert(alertParams);
        });

Comments

[OVK2015]

В этом коде комментарий

// при необходимости, удаляем сообщение спустя 3 секунды

как-то не правильно смотрится. С этим var alertParams ф-ция то гарантирована через 3с удалит 'div.alert'.
Делайте для каждого вызова свой container-alert и работайте с ним

[Михаил Р.]

OVK2015: 'свой' - это какой? с уникальным id?

[OVK2015]

Mike Ro: Можно и с разными id или разными data-атрибутами,- как удобней будет. Через eq(N) к ним вряд ли корректно обратиться получится,- время когда пользователь по кнопке кликнет и 3с таймер запустится заранее не известно

[Михаил Р.]

OVK2015: спасибо, попробую!

[OVK2015]

Mike Ro: Пока не за что

Answer 1

[Даниил Сорокин]

function create_alert(alertParams, event) {

            // проверяем наличие родительского контейнера на странице
            var search = $('div#container-alert')[0];
            

            // если родительского контейнера нет, то создаем его
            if(!search) {
                $('body').append('<div id="container-alert"></div>');
                console.log('apppend');
            };
  
            var alert = $('<div class="alert animated ' + alertParams['classAlert'] + ' ' + alertParams['showClass'] + '"></div');

            // создаем контейнер под сообщение и размещаем его внутри родительского контейнера
            $('div#container-alert')
                .prepend(alert);

            // добавляем текст в сообщение
            alert.html(alertParams['text']);

            // при необходимости, скрываем сообщение по таймеру
            if(alertParams['hideClass']) {
                setTimeout(function () {
                    $('div.alert').removeClass(alertParams['showClass']);
                    $('div.alert').addClass(alertParams['hideClass']);

                    // при необходимости, удаляем сообщение спустя 3 секунды
                    if(alertParams['removeAlert']) {
                        setTimeout(function () {
                            alert.remove();
                        }, 1000);
                    };

                }, alertParams['hideTime']);
            };

        };

        var alertParams = {
            'text': 'Предупреждение системы',
            'classAlert': 'alert-danger',
            'showClass': 'zoomInRight',
            'hideTime': 3000,
            'hideClass': 'zoomOutRight',
            'removeAlert': 1
        };

        $('#login-form').on('click', function (event) {
            create_alert(alertParams, event);
        });

Comments

[Михаил Р.]

опробовал, результат тот-же... =(