如何仅移除div元素直接子节点层级的 而不影响子元素内部内容

不要用正则直接替换整个HTML字符串，正则无法精准区分节点层级，很容易误改子元素内部的内容。正确的做法是通过DOM API遍历目标元素的直接子节点，仅对直接子节点中的文本节点做处理：

const targetDiv = document.querySelector('.block');
// 遍历所有直接子节点
Array.from(targetDiv.childNodes).forEach(node => {
  // 仅处理文本节点（nodeType === 3 代表文本节点）
  if (node.nodeType === 3) {
    // 替换文本节点中所有的 （对应Unicode字符\u00A0）
    node.textContent = node.textContent.replace(/\u00A0/g, '');
    // 可选：如果希望连普通空格也一起清理，用下方写法
    // node.textContent = node.textContent.replace(/[\s\u00A0]+/g, '');
    // 可选：如果处理后文本节点为空，直接移除该节点，避免残留无意义空节点
    if (node.textContent.trim() === '') {
      targetDiv.removeChild(node);
    }
  }
});

方案说明 #

• 核心逻辑是只操作父元素的childNodes属性，该属性只会返回直接子节点，不会递归获取嵌套子元素的节点，自然不会改动<td>等子元素内部的内容
•  在DOM文本节点中对应的是Unicode编码\u00A0，直接处理textContent比操作HTML字符串更安全
• 可按需添加空文本节点清理逻辑，避免移除 后残留的空文本节点占用页面布局位置

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