Question

我正在开发一个javascript项目，我在其中使用文档片段一次追加多个span元素。然后他们用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

由于您已经指定了一个类：

spanVar.className = "redCircle";

您可以使用它来选择所有这些元素并将其删除：

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

Answer 2

几点（进一步到我最初的评论）。为了生成，我将额外的createElement("span")放在顶部，因为它永远不会被使用。然后在循环中创建span，而不是spanVar（假设是不需要的）。对于create element方法，您只需为它提供您想要的元素类型。

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);
};

对于清理，最简单的方法就是使用您创建的类。查询所有人，＆amp;然后逐个核心。

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

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

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

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

2 个答案: