title: remove element in jquery then append a new element?
body: <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>