Question

让我们考虑以下代码

var ULs = document.getElementsByTagName('ul');
for(var i = 0; i < ULs.length; i++) {
	var ulLIs = ULs[i].getElementsByTagName('li');
	for(var n = 0; n < ulLIs.length; n++) {
		ulLIs[n].parentNode.removeChild(ulLIs[n]);
	}
}

<ul>
	<li>1-1</li>
	<li>1-2</li>
	<li>1-3</li>
	<li>1-4</li>
</ul>
<ul>
	<li>2-1</li>
	<li>2-2</li>
	<li>2-3</li>
	<li>2-4</li>
</ul>

如您所见，JavaScript仅删除偶数或奇数子级。但是我需要删除所有孩子。

我该怎么办？

Answer 1

在内部循环中删除元素时，ulLIs列表中其后继元素的索引将减少一个，特别是要访问和删除的下一项的索引。因此，它由当前索引n引用。但是对于下一次迭代，该索引会增加。

通过倒数避免此问题：

for (var n = ulLIs.length-1; n >= 0; n--) {
    ulLIs[n].parentNode.removeChild(ulLIs[n]);
}

This SO answer通过重新设置列表容器的innerHtml或重复删除第一个子节点直到没有子节点，提供了两个更好的解决方案。

Answer 2

首先要从一开始就删除元素，这会造成问题，因为它正在删除不可用的对象。

var ULs = document.getElementsByTagName('ul');
for(var i = 0; i < ULs.length; i++) {
	var ulLIs = ULs[i].getElementsByTagName('li');
	for(var n = ulLIs.length-1; n >=0; n--) {
		ulLIs[n].parentNode.removeChild(ulLIs[n]);
	}
}

<ul>
	<li>1-1</li>
	<li>1-2</li>
	<li>1-3</li>
	<li>1-4</li>
</ul>
<ul>
	<li>2-1</li>
	<li>2-2</li>
	<li>2-3</li>
	<li>2-4</li>
</ul>

第二，为什么要在一个line里写很多东西呢？

Array.prototype.forEach.call( element, function( node ) {
   node.parentNode.removeChild( node );
});

或

var myNode = document.getElementById("foo");
myNode.innerHTML = '';

Answer 3

var ULs = document.getElementsByTagName('ul');
for(var i = 0; i < ULs.length; i++) {
	var ulLIs = ULs[i].getElementsByTagName('li');
	var n = ULs[i].getElementsByTagName('li').length;
	while(n--) {
		ulLIs[0].parentNode.removeChild(ulLIs[0]);
	}
}

<ul>
	<li>1-1</li>
	<li>1-2</li>
	<li>1-3</li>
	<li>1-4</li>
</ul>
<ul>
	<li>2-1</li>
	<li>2-2</li>
	<li>2-3</li>
	<li>2-4</li>
</ul>

由于for循环而发生。删除后的一个占据后一个位置。因此，它们被跳过。因此，删除始终位于末尾的第0个元素将解决此问题。

为什么只删除双循环内的偶数/奇数子项

3 个答案: