hasChildNodes返回false但childNodes有节点，removeChild报错问题咨询

核心错误点 #

• 父元素ID不匹配
  HTML中书架的ID是bookshelfId，但你JS代码里用document.getElementById("bookshelf00")获取元素，根本找不到正确的父容器，后续操作自然异常。

• onclick传参未加引号
  HTML里的onclick="deleteFunction(XIjqg9j6QOwC00M);"中，XIjqg9j6QOwC00M没有加引号，会被JS解析为变量名而非字符串ID。由于不存在这个变量，bookId参数拿到的是undefined，调用document.getElementById(undefined)返回null，而removeChild要求参数必须是Node类型，因此触发类型错误。

• hasChildNodes使用错误
  hasChildNodes是节点的方法而非属性，必须加括号调用bookShelf.hasChildNodes()才能得到布尔值。你直接打印方法本身，输出的是函数代码，并非实际的节点存在状态。

修正后的代码 #

HTML部分（修正传参引号）

<div id="content" class="content-container">
  <h2>My Bookshelf</h2>
  <div class="bookShelf" id="bookshelfId">
    <div class="card marked" id="XIjqg9j6QOwC00M">
      <div class="card-icons" id="icon1">
        <i class="fa-regular fa-trash-can" id="TR-XIjqg9j6QOwC" onclick="deleteFunction('XIjqg9j6QOwC00M');"></i>
      </div>
      <div>element2</div>
      <div>element3</div>
      <div>element4</div>
    </div>
  </div>
</div>

JavaScript部分（修正ID+规范方法调用+增加容错）

function deleteFunction(bookId) {
  var bookShelf = document.getElementById("bookshelfId");
  console.log(bookShelf.hasChildNodes()); // 正确调用方法
  var bookToDelete = document.getElementById(bookId);
  // 先判断元素存在且属于目标父容器，再执行删除
  if (bookToDelete && bookShelf.contains(bookToDelete)) {
    bookShelf.removeChild(bookToDelete);
  }
}

更简洁的替代方案 #

不需要依赖父元素，直接调用元素自身的remove()方法：

function deleteFunction(bookId) {
  var bookToDelete = document.getElementById(bookId);
  if (bookToDelete) {
    bookToDelete.remove();
  }
}

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