Jquery 删除父div中的第一个div会导致删除所有内部div

我有这个密码

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

我想在一些动画之后删除#main中的第一个div

我写了jquery

$('#leftbutton').click(function() {
            $('#main').append('<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"></div>');
            $('.item').animate({
                "left": "-=210px"
            }, 200, function(){
                $('#main div:first-child').remove();
            });
        });
});

$（'#leftbutton'）。单击（函数（）{
$（'#main'）。附加（''）；
$（'.item'）。设置动画({
“左”：“-=210px”
}，200，函数（）{
$（“#主分区：第一个子项”）.remove（）；
});
});
});

但它也删除了所有其他div。我只想删除第一个div，我怎么做

范例

编辑

我需要保存第一个元素的引用，然后为所有div制作动画，然后通过引用删除第一个div

$('div#main div').first().remove();

---

尝试使用第一个选择器而不是第一个子项，请参见

更新：

好的，您是否尝试过这样删除：

$('.item').animate({
            "left": "-=210px"
        }, 200, function(){
            $(this).remove();
        })

您希望使用而不是。first只获取第一个匹配的元素，first子元素获取任何匹配的元素

$('#leftbutton').click(
   function() { 
       $('#main').append(''); 
       $('.item').animate({ "left": "-=210px" }, 200, function(){ $('.item:first').remove(); 
       }); 
  }); 
});

试试这个

  $("#main div").eq(0).remove();  

---

我认为您的问题在于，您正在对所有子元素设置动画，并且对于这些动画中的每一个，您都在传递一个回调，该回调在完成时执行，该回调将删除第一个元素。实际上，您正在执行“删除第一个元素”

x

次数，其中

x

是正在设置动画的元素数

因此，第一个元素动画完成，删除第一个子元素。第二个元素动画完成，它还删除第一个子元素（以前是第二个子元素），等等

在调用

.animate（）

之前，我将存储对要删除的特定元素的引用，然后使用该变量执行删除

$('#leftbutton').click(function() {
    $('#main').append('<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"></div>');
    var $firstElement = $('#main div:first');
    $('.item').animate({
        "left": "-=210px"
    }, 200, function() {
       $firstElement.remove();
    });
});

$（'#leftbutton'）。单击（函数（）{
$（'#main'）。附加（''）；
var$firstElement=$（“#main div:first”）；
$（'.item'）。设置动画({
“左”：“-=210px”
}，200，函数（）{
$firstElement.remove（）；
});
});

---

所有其他div也会被删除：（如果使用

$（“#main div:first child”）.remove（）；

它的工作原理是相同的，所以这不是问题所在。我认为事件有自己的上下文，只有一个div类“.item”这个div实际上是第一个。所以现在发生的不是其他div和第一个一起被删除，而是所有div被一个接一个地删除。啊，当然是全部删除！它在所有.item元素中循环。Firts pass-删除第一个div。然后它进入第二个item-删除之前第二个的新的第一个div。就像通过所有div删除所有其他div…当我没有指定class=“item”时，它可以工作，但我需要为项目指定相同的类…相同的结果，所有div都被删除，因为它们具有相同的类。我在选择器中犯了一个错误，它应该是“item:first”@Ajinkya它在你的演示中工作，与问题中描述的实际情况完全不同。@AnthonyGrist:我刚刚删除了

style

，无论如何，我已经用中给出的代码更新了演示question@Ajinkya这个问题包括一个对一组元素进行回调的动画，你只调用了一行代码。我不能标记answer作为有用的原因我需要15个声誉sorry@ArmeniaH不用担心，只要问题解决了。

$('#leftbutton').click(function() {
    $('#main').append('<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"></div>');
    var $firstElement = $('#main div:first');
    $('.item').animate({
        "left": "-=210px"
    }, 200, function() {
       $firstElement.remove();
    });
});