Question

所以，我试图删除一个元素的所有子元素，让我们说wrapper有aurl类，并写下这段代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

当我点击仅重新加载按钮one时，three，five个元素正在删除而其余部分则没有删除。以下是调试代码后的观察结果，i=4 e的{{1}}值为undefined，并且每次获取备用元素，例如一，三，五删除。

Answer 1

尝试运行for循环反向，因为children.length减少。

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

<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>

Answer 2

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

＆＃13;

document.addEventListener("DOMContentLoaded", function (){	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);
  });
 });
});

＆＃13;

<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>

＆＃13;

Answer 3

我认为您必须使用childNodes AS以下说明

childNodes和children之间的差异，即childNodes包含所有nodes，包括完全由text nodes组成的whitespace，而children }是仅作为元素的子节点的集合。

我认为它可能对你有帮助

Answer 4

这里的简单解决方案，只需传递要从容器中删除的元素/类

<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演示。

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

4 个答案: