How to create an element and after a few set seconds remove it?

You can use this:

var aviso = '<p id="lblAviso">Salvo com sucesso</p>';
var destino = $('#destinoAviso');

//codigo que você quer:
destino.append(aviso);
setTimeout(function(){
    $('#lblAviso').remove();
},3000);

Example

Another example using fade in / out, hiding the element directly in the CSS.

In this example I use:

• setTimeout () that is used to run code within the anonymous function once, and where the last parameter is counter (in milliseconds) of time to execute the code.
• .append () , one of the jQuery methods for inserting content into a given DOM element.

You can also use a jQuery string, using .delay () and calling .fadeOut () callback function to remove the element when the animation comes to an end.

So, making a note to CSS #lblAviso { display:none; } , the code can be:

$('#lblAviso').fadeIn().delay(3000).fadeOut(function () {
    $(this).remove()
});

Example

Another example , using an overlay (overlay).

An interesting way is to display the warning and remove it with a fade out :

$('<p id="lblAviso">Salvo com sucesso</p>')
  .appendTo('body')
  .delay(1000)
  .fadeTo("slow", 0, function() { $(this).remove(); });

Note that, at the end, the element is removed.

See the functional example in jsfiddle .

You can, instead, remove it immediately from the page, hide it in an animated way by controlling the animation time:

$lblAviso = $('<p id="lblAviso">Salvo com sucesso</p>'); // cria o elemento
$lblAviso.hide(); // atribui o elemento como escondido (apesar de ainda não estar na página)
$('#conteudo').append($lblAviso); // adiciona o elemento a outro elemento
$lblAviso.fadeIn(); // exibe o elemento com animação de fade (animação rápida)
$lblAviso.fadeOut(3000); // esconde o elmento com animação de fade (a animação dura 3 segundos)

Example

If you find it necessary to remove the element from the page, change the last line of the example to:

$lblAviso.fadeOut(3000, function() {  $lblAviso.remove(); });

There are already a number of very good answers to the question, I will just leave a different and abstract example of the target element that can serve future visitors.

Introduction

Create a "mini" jQuery extension that allows you to add warning, success, information, or error captions to any element on the page, thus allowing you to reuse the same code excerpt in various situations.

See example in JSFiddle , with some CSS formatting for demonstration!

jQuery

;(function ($) {

    $.fn.goLabel = function( options ) {

        var opts = $.extend({
            type: "success",
            message: "guardado com sucesso",
            time: 3000
        }, options );

        var $label = $('<span/>', {"class": "label"}).addClass(opts.type).html(opts.message);

        return this.append($label).find('.label').delay(opts.time).fadeOut(300, function(){
            $(this).remove();
        });
    };
}( jQuery ));

Usage:

The usage is simple, using a id or class , we call goLabel() with the desired options:

// assumindo as opções por defeito
$( "#devicePrice" ).goLabel();

// com personalização das opções
$( "#newsletterStatus" ).goLabel({
    type: "info",
    message: "receber é muito bom",
    time: 3000
});