无法删除元素的所有孩子与特定类

所以，我试图删除所有孩子的元素可以说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

无法删除元素的所有孩子与特定类

回答

相关问题