javascript - 为什么removeChild函数的行为与列表项和i标记不同？

我注意到removeChild的行为不像其他元素（如列表项）那样。我正在使用i标记来获取来自frontAwesome的某些图标，并希望在单击按钮时分别删除这些项目。

不幸的是，只有两次使用removeChild（）函数，我才能删除每个i标记元素。（奇怪的！）

这是怎么回事？

HTML：

  <div id="myFonts">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
  </div>

Javascript：

function FunctionTwo() {
    var font = document.getElementById("myFonts");
    font.removeChild(font.childNodes[0]);
}

https://codepen.io/anon/pen/EeaYvL

编辑
注意：是否使用LineBreaks会有所不同！

<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

在这里，有6个子节点。显然，LineBreaks也被视为子节点！

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

在这里，有3个子节点。很奇怪-这是一个错误吗？

最佳答案

从MDN，

  childNodes包括所有子节点，包括非元素节点，例如
  文本和评论节点。要获取仅元素的集合，请使用
  改为使用ParentNode.children。

因此，在两种情况下，这些元素都被怪异地去除了。你应该更新

从

font.removeChild(font.childNodes[0]);

至

font.removeChild(font.children[0]);