追加后如何删除文档片段中的元素

Question

我正在开展一个 javascript 项目，在该项目中，我使用文档片段一次附加多个跨度元素。然后他们用 css.

动画

.redCircle {
    float: left;
    height:20px;
    width:20px;
    border-radius:10px;
    box-shadow: 0 0 20px red;
    background-color: red;
    animation: 2s circleFall linear;
}

@keyframes circleFall {
    0%{margin:0;}
    100%{margin:100% 10%;}
}


setInterval(thingyTime, 5000);

function thingyTime() {
    var count = 15,
        spanVar = document.createElement("span"),
        fragment = document.createDocumentFragment();

    for (var i = 0; i < count; ++i) { 

        for (var j = 0; j < 1; ++j) { 
            spanVar = document.createElement('spanVar');
            spanVar.className = "redCircle";
            fragment.appendChild(spanVar);
        }
    }

    document.body.appendChild(fragment);

};

thingyTime();

我想弄清楚如何在动画完成后删除跨度。我用过

setTimeout(function(){

    spanVar.remove(spanVar.selectedIndex);

},2000); // <= animation length

当它只针对一个元素时它工作正常，但我需要删除片段中的所有元素。

感谢您的帮助。

Answer 1

因为您已经指定了 class:

spanVar.className = "redCircle";

您可以使用它来 select 所有这些元素并删除它们：

$('.redCircle').remove();

Answer 2

一些（我最初评论的补充）。对于生成，我会把额外的 createElement("span") 放在顶部，因为它永远不会被使用。然后在循环中创建跨度，而不是 spanVar（假设不需要）。对于创建元素方法，您只需为其指定您想要创建的元素类型。

function thingyTime() {
    var count = 15,
        spanVar,
        fragment = document.createDocumentFragment();

    for (var i = 0; i < count; ++i) { 
        for (var j = 0; j < 1; ++j) { 
            spanVar = document.createElement('span');
            spanVar.className = "redCircle";
            fragment.appendChild(spanVar);
        }
    }
    document.body.appendChild(fragment);
};

对于清理，最简单的方法就是使用您创建的 class。全部查询，然后一一核对。

document.querySelectorAll(".redCircle").forEach(function(c){
    c.parentNode.removeChild(c);
});

另一方面，如果您有 redCircle 的其他实例，则您不想使用核武器。我会添加一个 var circlesToCleanup = []; 然后在创建循环中将每个 em 推到它上面 circlesToCleanup.push(spanVar)

然后当您调用清理时，迭代 circlesToCleanup 而不是 querySelector 输出。

追加后如何删除文档片段中的元素

how to remove elements in document fragment after append

javascript

css

jquery

documentfragment