無法刪除元素的所有孩子與特定類

所以，我試圖刪除所有孩子的元素可以說wrapper有aurl類，並寫了這個代碼無法刪除元素的所有孩子與特定類

document.addEventListener("DOMContentLoaded", function(){ 
 
\t document.getElementById("reload").addEventListener("click", function(){ 
 
\t \t var w = document.getElementById("wrapper"); 
 
\t \t for(var i=0; i<w.children.length; i++){ 
 
\t \t \t if(w.children[i].classList.contains("aurl")){ 
 
\t \t \t \t w.removeChild(w.children[i]); 
 
\t \t \t } 
 
\t \t } 
 
\t }); 
 
});

<div id="wrapper"> 
 
\t \t \t <div id="reload"> 
 
\t \t \t <span>Reload</span> 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="one"> 
 
\t \t \t One 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="two"> 
 
\t \t \t Two 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="three"> 
 
\t \t \t Three 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="four"> 
 
\t \t \t Four 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="five"> 
 
\t \t \t Five 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="six"> 
 
\t \t \t Six 
 
\t \t \t </div> 
 
\t \t </div>

當我只點擊重新加載按鈕one,three,five元素正在被刪除，其餘的都沒有。這是我調試代碼後的觀察結果，i=4的值e是undefined，並且它每次都得到替代元素，例如，一，三，五刪除。

來源

2017-07-28 viveksinghggits

removechild（e）中的e是什麼？ –

您在循環訪問時正在更改數組，這是javascript中的一個經典錯誤。向後循環是一個修復。 –

它的'w.children [i]'@FahadNisar – viveksinghggits

嘗試運行for循環扭轉，因爲children.length降低。

document.addEventListener("DOMContentLoaded", function(){ 
 
\t document.getElementById("reload").addEventListener("click", function(){ 
 
\t \t var w = document.getElementById("wrapper"); 
 
\t \t for(var i=w.children.length-1; i>=0; i--){ 
 
\t \t \t if(w.children[i].classList.contains("aurl")){ 
 
\t \t \t \t w.removeChild(w.children[i]); 
 
\t \t \t } 
 
\t \t } 
 
\t }); 
 
});

<div id="wrapper"> 
 
\t \t \t <div id="reload"> 
 
\t \t \t <span>Reload</span> 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="one"> 
 
\t \t \t One 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="two"> 
 
\t \t \t Two 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="three"> 
 
\t \t \t Three 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="four"> 
 
\t \t \t Four 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="five"> 
 
\t \t \t Five 
 
\t \t \t </div> 
 
\t \t \t <div class="aurl" id="six"> 
 
\t \t \t Six 
 
\t \t \t </div> 
 
\t \t </div>

來源

2017-07-28 05:45:02 HummiBocha

我認爲你必須使用childNodes如下解釋

childNodes和children之間的區別，這是的childNodes包含了所有nodes，包括text nodes完全由whitespace，而children是剛子節點的集合那是元素。

我認爲它可能幫你

來源

2017-07-28 05:44:58

您可以使用querySelectorAll()和forEach刪除元素。

document.addEventListener("DOMContentLoaded", function(){ \t document.getElementById("reload").addEventListener("click", function(){ 
 
    var children = document.querySelectorAll('#wrapper .aurl'); 
 
    var parent = document.getElementById('wrapper'); 
 

 
    Array.from(children).forEach(function(child){ 
 
    parent.removeChild(child); 
 
    }); 
 
}); 
 
});

<div id="wrapper"> 
 
    <div id="reload"> 
 
    <span>Reload</span> 
 
    </div> 
 
    <div class="aurl" id="one"> 
 
    One 
 
    </div> 
 
    <div class="aurl" id="two"> 
 
    Two 
 
    </div> 
 
    <div class="aurl" id="three"> 
 
    Three 
 
    </div> 
 
    <div class="aurl" id="four"> 
 
    Four 
 
    </div> 
 
    <div class="aurl" id="five"> 
 
    Five 
 
    </div> 
 
    <div class="aurl" id="six"> 
 
    Six 
 
    </div> 
 
</div>

這裏

來源

2017-07-28 05:51:28

簡單的解決方案，只是通過你想從容器

<script> 
document.addEventListener("DOMContentLoaded", function(){ 
    document.getElementById("reload").addEventListener("click", function(){ 
     var container = document.getElementById("wrapper"); 
     var elements = container.getElementsByClassName("aurl"); 

     while (elements[0]) { 
      elements[0].parentNode.removeChild(elements[0]); 
     } 
    }); 
}); 
</script>

Here是它的一個演示的jsfiddle刪除的元素/類。

來源

2017-07-28 05:58:29

無法刪除元素的所有孩子與特定類

回答

相關問題