如何使用jQuery移除div及其所有后代元素的空白

要实现对目标div（如#left）及其所有层级后代的空白清理，同时保留HTML标签和单词间的正常空格，我们可以通过遍历所有文本节点来处理，具体实现如下：

核心思路 #

1. 递归遍历目标元素下的所有节点，覆盖任意层级的后代元素
2. 仅针对文本节点操作：
   • 移除仅包含空白的文本节点（比如标签间的换行、缩进空白）
   • 对含有效内容的文本节点，先清理首尾空白，再将连续多空格替换为单个空格，保证文本可读性
3. 完全保留所有HTML标签结构

完整实现代码 #

HTML 结构

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left">
  <div>
    <p> This is p   with multiple spaces</p>
    <span>  Another span  </span>
    Some text directly in #left
  </div>
</div>

<button id="remove">Remove white space</button>
<div id="check">check</div>

jQuery 逻辑

$("#remove").click(function() {
  // 定义递归清理空白的函数
  function cleanWhitespace(node) {
    const childNodes = node.childNodes;
    // 倒序遍历避免节点移除导致的索引错乱
    for (let i = childNodes.length - 1; i >= 0; i--) {
      const child = childNodes[i];
      // 处理文本节点
      if (child.nodeType === 3) {
        const trimmedText = child.textContent.trim();
        if (!trimmedText) {
          // 移除纯空白文本节点
          child.parentNode.removeChild(child);
        } else {
          // 合并连续空格为单个，保留单词间隔
          child.textContent = trimmedText.replace(/\s+/g, ' ');
        }
      } else if (child.nodeType === 1) {
        // 递归处理元素节点的子节点
        cleanWhitespace(child);
      }
    }
  }

  // 启动对目标div的清理
  cleanWhitespace($("#left")[0]);

  // 将处理后的内容展示到check容器中
  $("#check").html($("#left").html());
});

代码说明 #

• 递归函数cleanWhitespace能处理任意层级的后代元素，无需提前知晓结构
• 仅操作文本节点，完全保留原有的HTML标签结构
• 精准区分纯空白节点和含有效内容的文本，既清理冗余空白又保证文本可读性
• 同时处理目标div本身的文本内容（比如示例中#left直接包含的文本）

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