JQuery remove .append after 5 seconds

Question

Oh gosh here a lot today - oops

Folks, best way to do this:

$j('.done').append('Your services have been updated');

(that bits done)

but then remove the append after say 5 seconds so that if a person resubmits a form(allowed) the append does not continue adding the text? i.e updated once "Your services have been updated", twice would read "Your services have been updated Your services have been updated" but I would only want Your services have been updated to show once

Answer 1

(function (el) {
    setTimeout(function () {
        el.children().remove('span');
    }, 5000);
}($j('.done').append('<span>Your services have been updated</span>')));

I know it looks weird.. I do it this way for self-containment. The append is immediately done when that anonymous function is called... that appended element is then saved as el in that anonymous scope, which itself is removed when the timeout fires after 5000ms.

Edit:

I edited the function above so it does not destroy the parent element (sorry about that)

Answer 2

I'm not sure of the context here, but would it work to do, say

<span id="special_message">Your services have been updated.</span>`

and then remove that particular ID'd tag afterwards?

Answer 3

DEMO: http://jsbin.com/ecufi/2 UPDATED

set your time by incrementing or decrementing the delay(#)

$j('.done').delay(2000).fadeOut(200,
function() {
    $(this).empty().append('Your services have been updated').fadeIn(200);
});

thanks to Matt for correct me and +1!

THEN why not simply hide/show! the message if its always the same!?

$('.done').fadeIn(200).delay(2000).fadeOut(200);

<span style="display:none" class="done">Your services have been updated!</span>

Answer 4

// a little jQuery plugin...
(function($){ 
    $.fn.timeout = function(ms, callback)
    {
        var self = this;
        setTimeout(function(){ callback.call(self); }, ms);
        return this;
    }
})(jQuery);

// ...and how to use it.
$("<span>Your services have been updated</span>")
    .appendTo('.done')
    .timeout(5000, function(){ this.remove(); });

Answer 5

You might considering Ben Alman's doTimeout plugin - http://benalman.com/projects/jquery-dotimeout-plugin/

$j('<span>Your services have been updated</span>')
    .appendTo('.done')
    .doTimeout( 5000, 'remove' );

Answer 6

I like this method which uses a short fadeout before the span is removed. It also removes previous messages before appending.

$("<span class='js_msg'>Your services have been updated</span>")
    .appendTo($j('.done').children("span.js_msg").remove().end())
    .each(function(){
        var self = $(this);
        setTimeout(function () {
            self.fadeOut(500,function(){
                self.remove();
            });
        }, 4500); 
   }
);