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: /

<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!

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/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!

• javascript
• jquery

Share Improve this question Follow asked Aug 28, 2011 at 10:05 XavierXavier 8,3421818 gold badges5656 silver badges8585 bronze badges 1

• 1 you can use the replaceWith method. :) api.jquery./replaceWith – Vince V. Commented Aug 28, 2011 at 10:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Use .replaceWith() instead:

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

http://jsfiddle/DCJ9X/4/

Or on one line:

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

This should do the trick:

$('#foo span').fadeOut(500).replaceWith('<span>FadeIn</span>').hide().fadein(500);

Well, if'n you wanted to keep more or less what you have, this works:

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

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

});