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

我注意到removeChild的行为与其他元素（如list item）不同。我正在使用frontAwesome的一些图标的I标记，并希望在单击按钮时单独删除这些项目

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

发生什么事了

HTML:

编辑 注意：使用或不使用换行符会产生不同

<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个子节点。奇怪-这是一个bug吗？

来自

childNodes包括所有子节点，包括非元素节点，如 文本和注释节点。要获取仅包含元素的集合，请使用 而不是ParentNode.children

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

从

到

---

对于调整，请同时执行。。如果你在你的链接上注意到你的两个代码

代码

咖啡牛奶

我们看到标签之间没有空格

鉴于，代码为

1. 2. 3. 4. 5.

你看到前面的空位了吗？这些已作为文本节点添加到div的childNodes对象中

1.

如果您选择不在标记前添加空格，则可以使用与当前完全相同的代码

例如，像这样：

12345

在此处检查div的修改HTML：

---

我刚刚注意到，如果我把所有内容都写在一行或使用分页符，那就很重要了。它也将把分页看作是节点。谢谢，您的解决方案更好。@BitByBit-很高兴帮助您：

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

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

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

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