Question

I have a button with this behavior: it disappears once clicked; then a small message fade in for a couple seconds, fades out and the button reappears again.

To show the small message I append a element after my hidden button but need to remove it from the DOM once it has faded out. However, as soon as I use remove() in the chain the element is deleted and never fadeIn/fadeOut!

// the button is generated dynamically
$('#myButton').live('click', function() {
    $(this)
        .fadeOut() // once clicked, the button disappears

        .after('<small style="display:none;">Dans panier</small>') // append the message after the button

        .next('small').fadeIn() // fade the new small message for a smooth effect

        .delay(1000) // leave it visible for a second...

        .fadeOut() // then fade it out

        .remove() // <-------- normally I would have remove it here from the DOM because it should be hidden, but the remove() method seems to be bypassing the other ones and the small message never shows up!

        .end() // stop using this object and return to the button

        .delay(1000) // use the same delay as the small message so they are timed

        .fadeIn(); // show it back at the end
});

Answer 1

If you want to remove it after the fadeOut, you can use the callback method:

[...]
.fadeOut(function(){ $(this).remove(); })

But once you remove it, you must insert back in in the DOM for it to reappear with the fadeIn.