javascript - 使用 javascript 处理行内 block 空间

Question

我们都知道行内 block 元素之间的空格这个由来已久的问题。例如:

.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;}

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

我认为最好的解决方案是删除元素之间的所有空格:

.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;}

<div class="wrapper">
    <div>
    </div><div>
    </div><div>
    </div><div>
    </div>
</div>

我们可以使用 javascript/jQuery 在现成的 HTML 上执行此操作，例如将脚本添加到第一个代码段以使其表现得像第二个代码段吗？某种 $('.wrapper').minify(); 函数。

编辑

有人建议可能与 How to minify HTML with CSS and Javascript? 重复.这个问题是关于通过在服务器端编辑文件来减少页面大小。在这里，我正在寻找一种在传输内容后缩小特定元素的解决方案，而无需编辑 html 文件。问题不在于页面大小，而在于元素中的空格。

Answer 1

使用 jQuery，您可以删除作为 wrapper 元素子元素的所有文本节点，例如

$('.wrapper').contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).remove();

.wrapper div {
  width: 100px;
  height: 30px;
  display: inline-block;
  border: 1px solid #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>