时间戳

首页 > 解决方案 > 为什么 removeChild 函数对列表项和 i 标记的行为不同？

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

标签： javascript

解决方案

来自MDN，

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

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

从

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

至

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

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

推荐阅读