title: Removing only the first child element and keeping the second with jQuery
body: <p>Looked around and couldn't find an answer to this, but apologies if it's been asked before.</p>
  
  <p>I'm looking to replace one DIV with another of the same kind, animating the new one in, then removing the first DIV, allowing the new DIV to take the removed DIV's place.  After creating and appending the new DIV, the HTML code looks like this (minus the comments):</p>
  
  <pre><code>&lt;div class="className"&gt;Inner HTML&lt;/div&gt; &lt;!-- original "className" div --&gt;
  &lt;div class="className"&gt;Inner HTML&lt;/div&gt; &lt;!-- appended "className" div --&gt;
  </code></pre>
  
  <p>I've tried several methods, the most recent being:</p>
  
  <pre><code>$(".className:eq(0)").remove();
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$(".className:eq(0)").html() = $(".className:eq(1)").html();
  $(".className:eq(1)").remove();
  </code></pre>
  
  <p>The first method removes all "className" elements, most likely due to the [0] element referring to the array as a whole.  The second method eliminates the second element, not the first.</p>
  
  <p>It would be simple enough to animate the new element in and leave things as they are, but I want avoid having a build-up of "className" elements in the DOM, as the solution needs to be recursive, allowing the "className" div to be replaced as many times as necessary.</p>