我尝试了 user76888 提出的技术，效果很好。为了方便，我把它打包成一个jQuery插件，并认为社区可能会喜欢它，所以在这里：

jQuery.fn.cleanWhitespace = function() {
    this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}

要使用它，只需将它包含在脚本标签中，然后选择一个标签以使用 jQuery 清理并调用函数，如下所示：

$('#widget').cleanWhitespace();

递归版本：

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            this.textContent = $.trim(this.textContent);
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}

我认为这会做到...

cleanWhitespace: function(element) {
 element = $(element);
 for (var i = 0; i < element.childNodes.length; i++) {
   var node = element.childNodes[i];
   if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
     Element.remove(node);
 }
}

将 HTML 设置为 DOM 节点后，您可能会做得更好。一旦浏览器解析了所有内容并从我们的标记中构建了一个 DOM 树，您就可以执行 DOM 遍历，并且对于您找到的每个文本节点，如果它没有非空白字符，则将其完全删除，或者从一开始就修剪空白并结束它，如果有的话。

这就是对我有用的方法和逐步发现：

输出来自 chrome 控制台

首先定位包含讨厌的空格的父节点

$('.controls label[class="radio"]').parent();

[<div class=​"controls">​
<label class=​"radio">​…​</label>​
" "
"    "
<label class=​"radio">​…​</label>​
" "
"    "
</div>​]

你可以看到它被包裹在一个来自 [] 括号的数组中，即使找到了单个项目，jQuery 也将始终返回一个类似结构的数组。

所以为了到达 HTMLElement 我们取数组中索引 0 处的第一项

$('.controls label[class="radio"]').parent()[0];

<div class=​"controls">​
<label class=​"radio">​…​</label>​
" "
"    "
<label class=​"radio">​…​</label>​
" "
"    "
</div>​

注意没有更多的 [] 括号。我们需要这样做的原因是因为 jQuery 会忽略 dom 中的空格而 HTMLElement 不会，看看当我们访问 childNodes 属性时会发生什么

$('.controls label[class="radio"]').parent()[0].childNodes;

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]

我们又得到了一个数组，是的，你发现了 [] 括号，但你看到另一个不同之处了吗，看看所有的逗号，这是我们无法用 jQuery 得到的。谢谢 HTMLElement 但现在我们可以回到 jQuery 因为我想使用 each 而不是 for 循环，你同意我的观点吗？因此，让我们将数组包装在 jQuery 中，看看会发生什么：

$($('.controls label[class="radio"]').parent()[0].childNodes);

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]

完美的！我们仍然有完全相同的结构，但现在在一个 jQuery 对象中，所以让我们调用每个并将“this”打印到控制台以查看我们有什么。

$($('.controls label[class="radio"]').parent()[0].childNodes).each(function () { 
   console.log('|'+$(this).html()+'|');
});

|<input id="gender_f" name="gender" type="radio" value="f">Female|
|undefined|
|undefined|
|<input id="gender_m" name="gender" type="radio" value="m" checked="">Male|
|undefined|
|undefined|

所以我们使用 jQuery 来获取每个元素的 html，标准的东西 `$(this).html 并且因为我们看不到空格让我们用管道 | 填充它，好计划但是我们这里有什么？正如您所看到的，jQuery 无法将空格转换为 html，现在我们还没有定义。但这更好，因为一个空间可能是真实的 undefined 肯定是假的 =)

所以让我们摆脱 jQuery 的傻瓜。我们需要的只是$(this).html() || $(this).remove();让我们看看：

$($('.controls label[class="radio"]').parent()[0].childNodes).each(function () { 
   $(this).html() || $(this).remove();
});

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]

哦，亲爱的……但不要害怕！每个仍然返回以前的结构而不是我们改变的结构，让我们看看我们的初始查询现在返回什么。

$('.controls label[class="radio"]').parent();

[<div class=​"controls">​
<label class=​"radio">​…​</label>​
<label class=​"radio">​…​</label>​
</div>​]

还有瓦拉！所有的性感和漂亮 =)

所以你有它，如何删除元素/标签 ala jQuery 样式之间的空白。

快乐！