title: jQuery remove multiple inputs then append just one
body: <pre><code>&lt;input type="text" name="val1"/&gt;
  &lt;input type="text" name="val2"/&gt;
  
  $('.beta-panel input').fadeOut(function(){
      $(this).remove();
      $('.beta-panel').append('&lt;h1&gt;Done&lt;/h1&gt;');
  });
  </code></pre>
  
  <p>I have the above code where when a button is clicked it runs a fade out and then appends and fades in a <code>done</code> tag. The problem is, when it fades and removes the inputs, it shows the same amount of <code>&lt;h1&gt;</code> tags as the inputs.</p>