如何在添加文檔片段後刪除元素

我正在處理一個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

如何在添加文檔片段後刪除元素

回答

相關問題