jquery - Handling inline-block spaces with javascript -

we know ages old problem white spaces between inline-block elements. example:

.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>

the best solution in opinion remove spaces between elements:

.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>

can on ready html javascript/jquery, adding script first snippet behave second one? sort of $('.wrapper').minify(); function.

edit

someone suggested possible duplicate how minify html css , javascript?. question reducing page size editing files on server side. here i'm looking solution minifies specific element after content transferred, without editing html files. problem not page size, white spaces in element.

using jquery can remove textnodes children of wrapper element like

$('.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>