Question

所以我想删除iframe的SVG，这是我的代码：

 var parent = document.querySelectorAll("#main");
 var child = parent[0].childNodes;
 var lengthOfNodes = child.length;

 for (var j = 0; j < lengthOfNodes; j++) {
      child[j].parentNode.removeChild(child[j]);
    }

child是我的svg元素的数组。

它可以工作，但有时这种算法会抛出“无法读取未定义的属性'parentNode'”，我也不知道为什么...我需要重新启动该算法才能使其正常工作。

Answer 1

您正在每次迭代中更改子元素本身的长度，请尝试以下操作：

for (var i=0, j = child.length; i<j; i++) 
{
    child[i].parentNode.removeChild(child[i]);
}

Answer 2

每次删除一个孩子时，children数组中的元素都会减少一个，因此像for (let j=0; j<length; j++)这样的循环在某个时刻会使j太大。

更喜欢这样的代码：

// This code removes all <li> nodes
const parent = document.querySelector('ul');
// Converts parent.children to an array,
// then use forEach which automatically handles varying length
[...parent.children].forEach(child => parent.removeChild(child));

<ul>
  <li>xxx</li>
  <li>xxx</li>
  <li>xxx</li>
  <li>xxx</li>
</ul>

请注意，为了清除父节点的内容，您可能希望使用更简单的parent.innerHTML = ''！

Answer 3

这样，删除要迭代的元素太容易了并利用refrences

var parent = document.querySelectorAll("#main");
var child = parent[0].childNodes;
child.forEach(c => c.remove());

或者如果您想在将来某个地方摆脱循环，那么ForEach循环将无济于事

var parent = document.querySelectorAll("#main");
var child = parent[0].childNodes;
for(var c of child){
//can get out of loop anytime
c.remove();
}

Answer 4

请问，您如何看待简单的while循环而不是for循环？像这样：

 var parent = document.querySelectorAll("#main");
 var child = parent[0].childNodes;
 var j = 0;

 while (obj.length > 0) {
   child[j].parentNode.removeChild(child[j]);
 }

删除所有元素要容易得多。但是，如果要在具有多个条件的活动列表上进行迭代，则可以执行反向循环：

 for (var i = obj.length - 1; i >= 0; i--) {     
   parent.removeChild(child[i]);
 }

Answer 5

如果父对象未定义，则在您调用parent [0]时，该数组为空。 SVG是否正在动态加载？如果是这样，您可能希望将其包装在回调中。

为什么我的代码抛出“无法读取未定义的属性'parentNode'”？

5 个答案: