Question

I am trying to remove an span element from HTML then replace that element with a new span element.

View the fiddle for a working example: http://jsfiddle.net/DCJ9X/

<div id="foo">
    <span>FadeOut</span>
</div>

<input id="go" type="button" value="lets go!" />

$('#go').click(function() {

    $('#foo span').fadeOut(500, function() {
        $(this).remove().parent().append('<span>FadeIn</span>').fadeIn(500);
    });

});

As always I am grateful for your help stack!

Answer 1

Use .replaceWith() instead:

    var $span = $('<span>FadeIn</span>');
    $(this).replaceWith($span);
    $span.fadeIn(500);

http://jsfiddle.net/DCJ9X/4/

Or on one line:

$(this).replaceWidth($('<span>FadeIn</span>').fadeIn(500));