Question

我有一排图像，我想删除页面上所有被切掉的图像。我写了这个函数：

var pawLineImages = document.querySelectorAll('#paw-line > img');
var pawImages = Array.prototype.slice.call(pawLineImages);
var cutOffIndex = 0;
var viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth);
for (var i=0; i<pawImages.length; i++) {
    var elm = pawImages[i];
    var rect = elm.getBoundingClientRect();
    if (rect.right - viewWidth >= 0) {
        cutOffIndex = i;
        break;
    }
}
if (cutOffIndex > 0) {
    // Here I want to remove all children [cutOffIndex ... pawImages.length]
}

有人知道我如何同时删除cutoffIndex之后的所有图像吗？我不愿意在for循环中执行此操作，因为这样一来，与立即执行所有操作相比，事情可能会更昂贵。

Answer 1

按如下所示在循环中更改“ if”条件以删除图像。无需中断循环，然后再次进行处理。

if (rect.right - viewWidth >= 0) {
   elm.parentNode.removeChild(elm);
}

OR

如果可以选择使用jQuery，则保持当前循环不变，并在循环之后使用jQuery一次删除所有图像。

// After the loop
$("#paw-line img").slice(cutOffIndex).remove();

一次删除多个DOM节点

1 个答案: