原生JS节点删除异常问题：初始节点需二次操作删除，动态创建节点可首次删除

这个问题我之前踩过坑！核心原因是HTML解析时的空白文本节点在搞鬼，咱们一步步拆解清楚：

异常产生的原因 #

你写初始<ol>的时候，<li>之间的换行、空格会被浏览器自动解析成空白文本节点（Text Node）。浏览器实际解析后的DOM结构大概是这样的：

<ol id='table'>
  [空白文本节点]
  <li>1</li>
  [空白文本节点]
  <li>2</li>
  ...
</ol>

你的del()函数里用了o.firstChild，第一次点击Del按钮时，删除的其实是第一个空白文本节点，根本碰不到<li>；第二次点击时，才轮到真正的<li>节点被删除。

那为什么动态创建的<li>没问题？因为add()函数是直接用appendChild把<li>加到<ol>末尾，不会额外插入空白文本节点，所以o.firstChild在第一次点击时就指向第一个<li>节点，自然一次就能删掉。

对应的解决方法 #

我们要确保删除的是第一个元素节点，而不是文本节点，这里有几种靠谱的实现方式：

方法1：用firstElementChild替代firstChild #

firstElementChild是专门用来获取父节点下的第一个元素节点的API，会自动忽略文本节点：

function del() { 
  var o = document.getElementById("table"); 
  // 先判断是否存在元素节点，避免无节点时报错
  if (o.firstElementChild) {
    o.removeChild(o.firstElementChild); 
  }
}

方法2：用querySelector直接定位第一个<li> #

更直观的方式，直接精准选择<ol>下的第一个<li>元素：

function del() { 
  var firstLi = document.querySelector("#table li:first-child"); 
  if (firstLi) {
    firstLi.parentNode.removeChild(firstLi); 
  }
}

方法3：清理初始HTML的空白（不推荐） #

把初始<ol>里的换行、空格全部删掉，让浏览器解析时不会生成空白文本节点：

<ol id='table'><li onclick="move(this)">1</li><li onclick="move(this)">2</li><li onclick="move(this)">3</li><li onclick="move(this)">4</li><li onclick="move(this)">5</li><li onclick="move(this)">6</li></ol>

这种方法虽然能解决问题，但会让HTML代码可读性极差，不推荐使用。

内容的提问来源于stack exchange，提问作者Saruno