移除两个元素子节点方法咨询：现有代码失效求替代方案

嘿，我看到你在尝试清空titleNotification和bindNotification两个元素的所有子节点时遇到了问题，咱们先拆解下你现有代码里的问题，再给出几种靠谱的实现方法～

你的代码里的问题点 #

• 循环条件错误：node2.hasChildNodes是直接引用了方法本身，而不是调用方法判断是否有子节点，应该写成node2.hasChildNodes()
• 子节点引用错误：你在移除node2的子节点时用了node.lastChild，这是取第一个元素的最后子节点去操作第二个元素，完全不对，应该用node2.lastChild
• 循环逻辑不合理：两个元素的子节点数量可能不同，放在同一个循环里会导致其中一个元素提前清空后，另一个的处理出现异常

修复后的原风格代码 #

如果你想保留原来的while循环思路，可以这样修改：

if ($('#notificationIco').css('display') !== 'none') {
  $('#notificationIco').hide();
  
  const titleNode = document.getElementById("titleNotification");
  const bindNode = document.getElementById("bindNotification");
  
  // 分别清空每个元素的子节点，避免互相影响
  while (titleNode.hasChildNodes()) {
    titleNode.removeChild(titleNode.lastChild);
  }
  
  while (bindNode.hasChildNodes()) {
    bindNode.removeChild(bindNode.lastChild);
  }
  
  return;
}

更简洁的实现方法 #

方法1：用innerHTML直接清空（最简单） #

这种方式代码量最少，适合大多数场景：

if ($('#notificationIco').css('display') !== 'none') {
  $('#notificationIco').hide();
  
  document.getElementById("titleNotification").innerHTML = "";
  document.getElementById("bindNotification").innerHTML = "";
  
  return;
}

方法2：封装通用函数（更易维护） #

如果以后还需要清空其他元素的子节点，封装一个通用函数会更方便：

// 通用清空子节点函数
function clearElementChildren(element) {
  while (element.hasChildNodes()) {
    element.removeChild(element.lastChild);
  }
}

// 业务逻辑代码
if ($('#notificationIco').css('display') !== 'none') {
  $('#notificationIco').hide();
  
  clearElementChildren(document.getElementById("titleNotification"));
  clearElementChildren(document.getElementById("bindNotification"));
  
  return;
}

方法3：用jQuery的empty()方法（如果你已经在用jQuery） #

既然你已经用了jQuery选择#notificationIco，可以直接用jQuery的empty()方法一步到位：

if ($('#notificationIco').css('display') !== 'none') {
  $('#notificationIco').hide();
  
  $('#titleNotification').empty();
  $('#bindNotification').empty();
  
  return;
}

这样修改后，不管哪种方式都能正常清空目标元素的所有子节点啦～

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