Hide instance of element after 5 seconds using JQuery

Question

I'm trying to implement a notification style JQuery function. Here's what I have so far

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>");
};

Calling this function adds the notification correctly but I haven't been able to make that specific element be removed after 'delay' period of time without removing all the other notifications. I've search but have only found #id based solutions or class based. I don't want to have to put ids on each new notification and if I remove it by .notice, all notifications will expire at the same time. The closest I've gotten has been to use

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

But I'm sure all of you can see how that's flawed. Any help or suggestions would be appreciated.

I don't see anything wrong in your code. Are you seeing any errors in your console? Where is that if statement available in your main code? — Rajaprabhu Aravindasamy, Mar 01 '16 at 19:06
http://stackoverflow.com/questions/3655627/jquery-append-object-remove-it-with-delay — Álvaro Touzón, Mar 01 '16 at 19:14
@ÁlvaroTouzón I've already seen that question, but it removes it based on class. — WiseOlMan, Mar 01 '16 at 19:20
@RajaprabhuAravindasamy the problem with my last code block is that if I add multiple notifications quickly, it will only remove the newest notification instead of the oldest. — WiseOlMan, Mar 01 '16 at 19:22

Anubhab · Answer 1 · 2016-03-01T19:17:40.290

1

You could try something like this:

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
};

edited Mar 01 '16 at 19:17

answered Mar 01 '16 at 19:11

Anubhab

741
1
9
20

Let me try this, but wouldn't this run into the issue of removing the last element from #notification-container which could be the notification that was added after? – WiseOlMan Mar 01 '16 at 19:15
Scoping will save you from that! The last child you are passing on to delete notice is a jquery element not the 'last child' per say. – Anubhab Mar 01 '16 at 19:17
Works! Very well done. Selecting as answer as soon as it let's me. – WiseOlMan Mar 01 '16 at 19:18

score 1 · Accepted Answer · answered Mar 01 '16 at 19:15

1

You can make the element a jQuery object and use that reference to remove it

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);
  }
}

answered Mar 01 '16 at 19:15

charlietfl

170,828
13
121
150

Wow, I really this answer although I'm not sure how it works. How does jquery know which $notification I'm talking about when you say $notification.remove(); – WiseOlMan Mar 01 '16 at 19:26
Instead of appending an anonymous html string that gets converted to dom elements..you are appending a dom element that is represented by a jQuery object. The reference to object is not lost during the append – charlietfl Mar 01 '16 at 19:28
As for knowing which... there is only one scoped variable object within each instance of the function call – charlietfl Mar 01 '16 at 19:30
Thanks, I think this answer is more suited to my needs. – WiseOlMan Mar 01 '16 at 19:52
What @adeneo did is same concept...just written differently – charlietfl Mar 01 '16 at 19:53

adeneo · Answer 3 · 2016-03-01T19:33:40.820

I would create the elements and store them in local variables, that way only the elements for that function call would be removed. Something like

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

I've never seen the way you're creating the divs before. Do you know of a good resource where I could read up on that? Or even just what it's called? — WiseOlMan, Mar 01 '16 at 20:09
@WiseOlMan - Sure, it's in the [**jQuery documentation**](http://api.jquery.com/jquery/#entry-examples-1), and is the preferred way of creating an element. — adeneo, Mar 01 '16 at 20:39

Hide instance of element after 5 seconds using JQuery

3 Answers3