Question

我正致力于使用aJax调用构建整页转换。我想在加载新页面时从DOM中删除内容。某些原因.remove（）正在从父容器中删除所有子项，即使我在其上添加了唯一的类或ID。我已经尝试了几种定位我想删除的元素的方法，但它仍然在做同样的事情。 remove（）应该只删除一个元素，即具有类名称的元素＆＃39; remove-from-dom＆＃39;当我使用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（）应该只删除容器中的最后一个子节点，但删除两个子节点。我只有2个孩子。我尝试过使用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();
  });

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

2 个答案: