43

what's wrong with that?

$('body').append("<div class='message success'>Upload successful!</div>");
$('.message').delay(2000).remove();

I want to append a success message to my html document, but only for 2sec. After that the div should be deleted again.

what am i doing wrong here?

regards

matt
  • 42,713
  • 103
  • 264
  • 397

4 Answers4

118

Using setTimeout() directly (which .delay() uses internally) is simpler here, since .remove() isn't a queued function, overall it should look like this:

$('body').append("<div class='message success'>Upload successful!</div>");
setTimeout(function() {
  $('.message').remove();
}, 2000);

You can give it a try here.

.delay() is for the animation (or whatever named) queue, to use it you'd have to do something like:

$("<div class='message success'>Upload successful!</div>").appendTo('body')
  .delay(2000).queue(function() { $(this).remove(); });

Which works, here...but is just overkill and terribly inefficient, for the sake of chaining IMO. Normally you'd also have to call dequeue or the next function as well, but since you're removing the element anyway...

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • +1 always providing good jquery answers similar to the one you provided for me earlier... – ACP Sep 07 '10 at 03:56
  • @Shog9 - To be *completely* accurate it's not *just* animations, it's just *by default* the `fx` queue animations run on, but it can be any queue if passed a name :) – Nick Craver Sep 07 '10 at 04:02
  • Woops, deleted that comment since you updated your answer. But you're correct, the queue support is fairly general-purpose, and could be used for other things - the animations just default to it. – Shog9 Sep 07 '10 at 04:04
  • 1
    @Shog9 - I just hope `.delay()` gets some love for queue/animation integration in 1.5, so that a `.stop(true, true)` purges the timeout which isn't stored at all currently...gives some very weird and unexpected side-effects at the moment, something that's not advertised enough IMO. – Nick Craver Sep 07 '10 at 04:08
  • Thanks a lot, I'm new to jquery and I was pulling my hair off with this. – raphie Oct 19 '11 at 19:35
  • This `.delay() is for the animation (or whatever named) queue` was very helpful. I was trying the same as OP, adding delay for .remove(). +1 – RaphaelDDL Jan 02 '12 at 17:36
  • I know this was answered a long time ago, but how would this be done if multiple messages were being created (since the first method would remove all divs with class 'message')? Would you need to use the second method that was included in this answer? – mattsoave Jul 11 '14 at 21:39
  • 1
    @mattsoave if you wanted to create/remove a single one, you'd just keep a reference to it, like this: `var m = $("
    Upload successful!
    ").appendTo("body");` and use `m.remove();` instead.     – Nick Craver Jul 12 '14 at 05:29
9

I think that correct way of doing that is to use jQuery queue method:

    $("<div class='message success'>Upload successful!</div>")
        .appendTo('body')
        .delay(2000)
        .queue(function() {
            $(this).remove();
        });
Viktor Kruglikov
  • 519
  • 6
  • 16
2

Maybe I'm using an outdated jQuery, but none of the methods suggested in other answers seem to work for me. According to http://api.jquery.com/delay/ , delay is for animation effects.

Using setTimeout() however, works nicely for me:

$('body').append("<div class='message success'>Upload successful!</div>"); 
setTimeout(function(){
    $(".message").remove();
}, 2000);
WSkid
  • 2,736
  • 2
  • 22
  • 26
0

And just for kicks, you could do the following, using delay:

$('body').append("<div class='message success'>Upload successful!</div>");
$('.message').show('fast').delay(2000).hide('fast')
$('.message').remove();
Strelok
  • 50,229
  • 9
  • 102
  • 115
  • @Shog9. You are right. I just had it working in a jsfiddle ... must have been a different snippet. Weird. – Strelok Sep 07 '10 at 04:09
  • Happened to stumble across this question and answer when looking for setTimeout and saw that you are still active. No idea if you could do this back in 2010, but nowadays you can use a function as a second parameter in your hide function. So just for kicks you could do `$('.message').show('fast').delay(2000).hide('fast', function(){$('.message').remove()});` =) – timo Sep 10 '15 at 07:19