remove element in jquery then append a new element?
<p>I am trying to remove an span element from HTML then replace that element with a new span element.</p>

<p>View the fiddle for a working example: <a href="http://jsfiddle.net/DCJ9X/" rel="nofollow">http://jsfiddle.net/DCJ9X/</a></p>

<pre><code>&lt;div id="foo"&gt;
    &lt;span&gt;FadeOut&lt;/span&gt;
&lt;/div&gt;

&lt;input id="go" type="button" value="lets go!" /&gt;

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

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

});
</code></pre>

<p>As always I am grateful for your help stack!</p>
