Remove first div in parent div causes all inner divs to be removed too
<p>I have this code</p>

<pre><code>&lt;div id="main" style="background:#aaaaaa;float:left;height:160px;margin:5px;position:relative;display:block;width:630px;"&gt;
        &lt;div id="1" class="item" style="background:#ffaacc;float:left;width:200px;height:150px;margin:5px;position:absolute;left:0px;top:0px;"&gt;
        &lt;/div&gt;
        &lt;div id="2" class="item" style="background:#aaccff;float:left;width:200px;height:150px;margin:5px;position:absolute;left:210px;top:0px;"&gt;
        &lt;/div&gt;
        &lt;div id="3" class="item" style="background:#ffccaa;float:left;width:200px;height:150px;margin:5px;position:absolute;left:420px;top:0px;"&gt;
        &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I want to remove first div in #main after some animation</p>

<p>I wrote jquery</p>

<pre><code>$('#leftbutton').click(function() {
            $('#main').append('&lt;div id='+ i++ +' class="item" style="background:#ffccaa;float:left;width:200px;height:150px;margin:5px;position:absolute;left:630px;top:0px;z-index:1"&gt;&lt;/div&gt;');
            $('.item').animate({
                "left": "-=210px"
            }, 200, function(){
                $('#main div:first-child').remove();
            });
        });
});
</code></pre>

<p>But it also removes all other divs. I only want to delete 1st div, how can i do that</p>

<p>example <a href="http://jsfiddle.net/Ks6K6/2/" rel="nofollow">http://jsfiddle.net/Ks6K6/2/</a></p>

<p><strong>EDIT</strong></p>

<p>I needed to save the reference for the first element then do animation for all divs and after that remove the first div by reference</p>
