javascript - 为什么removeChild函数对于列表项和i标签的行为不同？

Question

我注意到，removeChild 的行为与处理其他元素(例如列表项)时不同。我对 frontAwesome 中的一些图标使用 i 标签，并希望在单击按钮时单独删除这些项目。

不幸的是，只有使用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个子节点。显然，换行符也被视为子节点!

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

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

Answer 1

来自MDN ,

childNodes includes all child nodes, including non-element nodes like text and comment nodes. To get a collection of only elements, use ParentNode.children instead.

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

来自

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

至

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

对于调整，https://codepen.io/anon/pen/aazoLK