追加後にドキュメントフラグメント内の要素を削除する方法

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

（私の最初のコメントにさらに）数ビット。生成するために、それは決して使用されないので、私は余分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); 
}; 

クリーンアップの場合、作成したクラスを使用するだけです。すべてを照会し、&、次に1つずつヌークイン。

redcircleの他のインスタンスを使用している場合は、もう一方では核兵器を使用したくありません。私はむしろquerySelector出力よりもcirclesToCleanupを繰り返す、あなたのクリーンアップを呼び出すときvar circlesToCleanup = [];が、その後作成ループで次にcirclesToCleanup.push(spanVar)

へ上のemのそれぞれを押して追加したいです。

Answer 2

あなたはすでにクラスを指定しているので：

spanVar.className = "redCircle"; 

あなたはこれらすべての要素を選択し、それらを削除するためにそれを使用することができます

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