Скрыть экземпляр элемента через 5 секунд с помощью JQuery

Question

Я пытаюсь реализовать функцию JQuery стиля уведомлений. Вот то, что я до сих пор

function notify(message, type, autohide, delay) { 
    message = message; 
    type = type || ""; 
    autohide = autohide || false; 
    delay = delay || 0; 
    $('#notification-container').append("<div class='notice " + type + "'>" + message + "<div class='close-container'><span class='glyphicon glyphicon-remove'></span></div></div>"); 
}; 

Вызов этой функции добавляет уведомление правильно, но я не был в состоянии сделать что конкретный элемент будет удален после того, как «задержка» периода времени без удаления всех других уведомлений. Я искал, но нашел только решения на основе #id или основанные на классе. Я не хочу добавлять идентификаторы в каждое новое уведомление, и если я удалю его с помощью .notice, все уведомления истекут в одно и то же время. Самое близкое, что я получил, должно было использовать

if (autohide) { 
    setTimeout(function() { 
    $('#notification-container .notice:last-child').remove(); 
    }, delay); 
} 

Но я уверен, что вы все видите, как это испорчено. Любая помощь или предложения будут оценены.

Answer 1

Вы можете сделать элемент объект JQuery и использовать эту ссылку, чтобы удалить его

function notify(message, type, autohide, delay) { 
    message = message; 
    type = type || ""; 
    autohide = autohide || false; 
    delay = delay || 0; 
    var $notification = $("<div class='notice " + type + "'>" + message + "<div class='close-container'><span class='glyphicon glyphicon-remove'></span></div></div>"); 
    $('#notification-container').append($notification); 


    if (autohide) { 
    setTimeout(function() { 
     $notification.remove();  
    }, delay); 
    } 
} 

Answer 2

Вы могли бы попробовать что-то вроде этого:

var deleteNotice = function(elem,delay){ 
    var tout = setTimeout(function(){ 
     clearTimeout(tout); 
     elem.remove() 
    },delay);//Now this acts on only this element 
} 

function notify(message, type) { 
    $('#notification-container').append("<div class='notice " + type + "'>" + message + "<div class='close-container'><span class='glyphicon glyphicon-remove'></span></div></div>"); 
    //Now assign this element to a variable, so everytime your function is called el represents the latest notice 
    var el = $('#notification-container .notice:last-child'); 
    deleteNotice(el,10000);//A function to delete this selected element 
}; 

Answer 3

Я хотел бы создать элементы и хранить их в локальных переменных, таким образом только элементы для этого вызова функции будут удалены. Что-то вроде

function notify(message, type, autohide, delay) { 
    var div = $('<div />', { 
     'class' : 'notice' + (type ? ' '+type : ''), 
     text : message || '' 
    }), 
     close = $('<div />', { 
      'class' : 'close-container', 
      on  : { 
       click : function() { 
        div.remove(); 
       } 
      }, 
      html : $('<span />', { 
       'class' : 'glyphicon glyphicon-remove' 
      }) 
    }); 

    if (autohide) { 
     div.delay(delay||0).hide(0, function() { 
      $(this).remove(); 
     }); 
    } 

    $('#notification-container').append(div.append(close)); 
} 

FIDDLE

Here's a version that supports animations