jQuery .remove（）从容器中删除了我所有的孩子，而不仅仅是一个

Question

我正在使用aJax调用构建完整的页面过渡。 我要在加载新页面时从DOM中删除内容。 某些原因.remove（）会从父容器中删除所有子项，即使我在其上添加了唯一的类或ID。 我尝试了几种方法来定位要删除的元素，但它仍在做同样的事情。 remove（）应该只删除一个元素，即具有类名'remove-from-dom'的元素。当我使用addClass时，它将正确地定位到该元素。

                    $(response).prependTo('.swap-content');

                    var slideWidth = $('.swap-content').width();
                    $('.ajax-load-in-remove').animate({
                        left: + slideWidth
                    }, 1000, function () {
                        $('.ajax-load-in-remove').css('left', '').removeClass('hide-me');
                        $('.ajax-load-in-remove').last().addClass('remove-from-dom');
                        $('.remove-from-dom').remove();

                    });

我的容器看起来像这样

    <div class="parent">
        <div class="child">
        <div>
        <div class="child remove-from-dom">
       <div>
    </div>

.remove（）应该只删除容器中的最后一个子节点，但同时删除两个子节点。 我只有两个孩子。 我尝试使用ID，并已使用.last-child和.last（）

Answer 1

如果要删除最后一个.ajax-load-in-remove ，请使用

$('.ajax-load-in-remove').last().remove();

您无需向此元素添加remove-from-dom类，这仅是执行操作的一步。

Answer 2

问题是动画结束时您正在回调内部进行删除。

但是您正在许多元素$('.ajax-load-in-remove').animate ，因此将为每个动画结尾触发回调。 并且每个回调都将删除当前的最后一个元素。

您可以使用.promise来解析所有动画的完成时间。

$('.ajax-load-in-remove')
  .animate({
    left: +slideWidth
  }, 1000)
  .promise()
  .then(function() {
    $('.ajax-load-in-remove').css('left', '').removeClass('hide-me');
    $('.ajax-load-in-remove').last().remove();
  });