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

Question

所以，我试图删除一个元素的所有子元素，比如说具有 aurl 类的 wrapper ，并编写了这段代码

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]);
			}
		}
	});
});

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

当我单击重新加载按钮时，仅删除一个、三个、五个元素，其余元素不会被删除。 这是我在调试代码后的观察结果，因为 e 的 i=4 值是 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>