Question

我有这段代码

<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();
            });
        });
});

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

示例http://jsfiddle.net/Ks6K6/2/

修改

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

Answer 1

我认为你遇到的问题是你在你的子元素的所有上进行动画制作，并且对于每个动画，你传递的是一个回调，当它完成后会执行删除第一要素。您实际上是在“删除第一个元素”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();
    });
});

Broken DEMO

Fixed DEMO

Answer 2

尝试

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

Answer 3

您想使用first代替first-child。首先获得第一个匹配，first-child获取任何匹配元素。

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

Answer 4

尝试使用第一个选择器而不是第一个孩子，请参阅http://api.jquery.com/first-selector/

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

更新：

好的，你试过这样删除：

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

Answer 5

试试这个

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

DEMO

删除父div中的第一个div导致所有内部div也被删除

5 个答案: