jQuery: append() object, remove() it with delay()

jquery append delay
matt picture matt · Sep 7, 2010 · Viewed 58.1k times · Source

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

Answer

Nick Craver picture Nick Craver · Sep 7, 2010

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...

Related questions

Creating a div element in jQuery

How do I create a div element in jQuery?

Read More
How to Append <script></script> in javascript?

I need to use childappend or jquery append() to append some tag stuff into the document. From what I can tell, this is getting stripped out. Anyone know how to do it?

Read More
.append(), prepend(), .after() and .before()

I am pretty proficient with coding, but now and then I come across code that seems to do basically the same thing. My main question here is, why would you use .append() rather then .after() or vice verses? I have …

Read More