如何在添加文档片段后删除元素

我正在处理一个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

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

我赞赏你的帮助。

来源

2016-09-26 thinoquinn

循环'spanVar'将会是您创建的最后一个跨度的引用（因为for循环每次都会覆盖它）。你也在创建'spanVar'类型的元素，而不是实际的跨度（不确定这是否是故意的）。最简单的解决方案，坚持你在一个数组中创建的所有元素，然后迭代它来整理它们。 – Carl

是的，@Carl我注意到它是用变量名创建元素，我认为它很奇怪。 Google搜索后我一直无法找到它。你能为我解释一下吗？ – thinoquinn

数位（继我最初的注释）。为了生成，我会将额外的createElement("span")放在顶部，因为它永远不会被使用。然后在循环中创建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); 
};

对于清理，最简单的方法就是使用您创建的类。查询em全部，&然后逐个核对em。

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

如果您有红圈的其他实例，您不想在另一方面核武。我想补充一个var circlesToCleanup = [];然后在创建循环互推EM的上它circlesToCleanup.push(spanVar)

然后当你打电话给你清理，迭代circlesToCleanup而非querySelector输出。

来源

2016-09-26 14:24:04 Carl

感谢@Carl这样的：'document.querySelectorAll（ “bossLaser”）的forEach（函数（C）{ \t \t \t c.parentNode.removeChild（C）; \t \t}）;'为我工作。 – thinoquinn

逐个移除每个孩子将导致浏览器重新绘制并重新绘制每个移除的孩子。如果您有多个跨度，则更好的解决方案是将跨度添加到doc片段，然后添加到父容器，并在准备移除时，移除父容器，从而在一次回流中移除所有跨度。 –

并非总是如此，现代浏览器等待JavaScript执行完成，重新绘制任何东西之前 –

既然你已经指定一个类：

spanVar.className = "redCircle";

，你可以用它来选择所有这些元素并删除它们：

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

来源

2016-09-26 13:59:33

如何在添加文档片段后删除元素

回答

相关问题