JavaScript中removeChild删列时避免报错及保留最后子节点的方法

嘿，我来帮你搞定这个问题！首先得说清楚你遇到的错误根源：当你尝试调用removeChild(k[i].childNodes[2])时，如果childNodes[2]不存在（也就是子节点数量不够3个，因为索引从0开始），你传入的就是undefined，而removeChild()必须接收一个有效的Node对象，所以就会抛出那个类型错误。另外还有个小坑：childNodes会把DOM里的空白换行、空格都当成文本节点算进去，所以你以为的第二个column元素，大概率不是childNodes[2]，不过先聚焦你的核心需求——错误捕获和节点存在性判断。

一、用try...catch捕获错误 #

如果你就是想捕获这个错误，用JavaScript的try...catch语句就可以，把可能出错的代码包裹在try块里，出错时自动进入catch块处理：

function deleteColumns() {
  let k = document.getElementsByClassName('row');
  for(let i=0; i<k.length; i++) {
    try {
      if(k[i].hasChildNodes()){
        k[i].removeChild(k[i].childNodes[2]);
      }
    } catch (error) {
      // 捕获到错误时的操作
      console.log('删除失败：', error.message);
      console.log('hello'); // 你要的自定义操作
    }
  }
}

⚠️ 注意：我把函数名从delete改成了deleteColumns，因为delete是JavaScript的保留关键字，不能用作函数名，这也是个容易踩的坑！

二、提前判断节点是否存在（更推荐） #

比起事后捕获错误，提前检查目标节点是否存在是更高效的写法，能从根源避免错误。你原来的if(!k[i].hasChildNodes())判断太宽泛了——它只能说明当前row有子节点，但不代表子节点数量足够到索引2的位置。直接判断目标节点是否存在就好：

function deleteColumns() {
  let k = document.getElementsByClassName('row');
  for(let i=0; i<k.length; i++) {
    const targetNode = k[i].childNodes[2];
    if (targetNode) { // 只要节点存在就执行删除
      k[i].removeChild(targetNode);
    } else {
      // 没有足够子节点时执行的操作
      console.log('hello');
    }
  }
}

额外优化：精准删除第二个column元素 #

如果你实际需求是删除每个.row下的第二个column元素（而不是包含空白节点的childNodes），那应该用children代替childNodes——children只返回元素节点，会忽略空白文本节点，这样索引1就对应第二个column：

function deleteColumns() {
  let k = document.getElementsByClassName('row');
  for(let i=0; i<k.length; i++) {
    const secondColumn = k[i].children[1]; // 第二个column的索引是1（从0开始计数）
    if (secondColumn) {
      k[i].removeChild(secondColumn);
    } else {
      console.log('hello');
    }
  }
}

三、修正后的完整代码 #

别忘了把HTML里的按钮点击事件改成新的函数名：

<div id="table">
  <div class="row">
    <div class="column">1.1</div>
    <div class="column">1.2</div>
    <div class="column">1.3</div>
    <div class="column">1.4</div>
    <div class="column">1.5</div>
  </div>
  <div class="row">
    <div class="column">2.1</div>
    <div class="column">2.2</div>
    <div class="column">2.3</div>
    <div class="column">2.4</div>
    <div class="column">2.5</div>
  </div>
  <div class="row">
    <div class="column">3.1</div>
    <div class="column">3.2</div>
    <div class="column">3.3</div>
    <div class="column">3.4</div>
    <div class="column">3.5</div>
  </div>
  <div class="row">
    <div class="column">4.1</div>
    <div class="column">4.2</div>
    <div class="column">4.3</div>
    <div class="column">4.4</div>
    <div class="column">4.5</div>
  </div>
  <div class="row">
    <div class="column">5.1</div>
    <div class="column">5.2</div>
    <div class="column">5.3</div>
    <div class="column">5.4</div>
    <div class="column">5.5</div>
  </div>
</div>
<div id="button">
  <input type="button" onclick="deleteColumns()" value="delete">
</div>

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