Jquery .remove() 不更新 DOM

Question

我正在尝试使用 .remove() jQuery 方法从 DOM 中删除一个元素

基本上我正在解析一个列表并删除某些元素。然后紧接着，我重新解析列表以对其余元素进行一些处理。

但是列表大小的简单打印输出给我的印象是要过滤掉的元素没有被删除

$list = $(".elements_list");
alert( $list.size());
$list.each(function(){
  if ( $(this).data("quantity") == 0)
  {
    $(this).slideUp(1000,function(){
      $(this).remove();
    });
  }
});
change_background_colors();

在这种处理之后，我调用了另一个开头有以下代码的函数：

function change_background_colors() {    
  $list = $(".elements_list");
  alert($list.size());
  ...
}

我在删除元素之前和之后得到相同大小的列表...

我的方法有问题吗？

谢谢！

Answer 1

如果您在 setTimeOut 函数中调用尺寸警报，您将看到

$list = $(".elements_list");
alert($list.size());
$list.each(function () {
    if ($(this).data("quantity") == 0) {
        $(this).slideUp(1000, function () {
            $(this).remove();

        });
    }
});

setTimeout(function () {
    $list = $(".elements_list");
    alert($list.size());
}, 2000);

JSFiddle：

https://jsfiddle.net/upkkLq2m/2/

Answer 2

元素直到 1000 毫秒过去且动画完成后才会被移除。等到那时计算元素。

编辑：这是延迟到所有动画完成的更复杂的方法：

$list = $(".elements_list");
var n = 0;
$list.each(function(){
  if ( $(this).data("quantity") == 0) {
    n = n + 1; // one more callback to wait for
    $(this).slideUp(1000,function(){
      $(this).remove();
      n = n-1;
      checkIfAllDone();
    });
  }
});
function checkIfAllDone(){
  if(n===0){ // be sure that n was declared in the same scope as this function
    change_background_colors();
  }
}