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

Yet another solution :) What code does:

1. creates a hidden <span> element
2. appends it to element with '.add-comment' class.
3. Fades in the new span,

4. after 4.5sec new span fades out and removes itself.

   jQuery('<span />',{ style:'display:none' })
       .html('Mesaj trimis...')
       .appendTo(jQuery('.add-comment'))
       .fadeIn('slow', 
           function(){
               var el = jQuery(this);
               setTimeout(function(){
                   el.fadeOut('slow',
                       function(){
                           jQuery(this).remove();
                       });
               }, 4500);
       }); 
   

Answer 2

I know its kinda late but I wanna share to you my solution as I added this to my global functionality .

function alert(elem,content,type,posi){
    
    //elem - element to be inserted
    //content - content of the alert box (based from bootstrap)
    //type -  alert type
    //posi - either append or prepend    
    
    //primary, secondary, success, warning, info, danger, light, dark
    if(type == undefined)
       type = 'info';

    elem.find('.glb-alert').remove();
    var a = '<div class="alert alert-danger col-md-12 glb-alert" role="alert" >'+content+'</div>';
    
    if(posi == undefined|| posi == 'prepend')
       elem.prepend(a).find('.glb-alert').delay(1200).fadeOut();
    else if(posi == 'append')
       elem.append(a).find('.glb-alert').delay(1200).fadeOut();

}