Работа с встроенными блочными пространствами с javascript

Question

Мы все знаем проблему старых возрастов с пробелами между элементами встроенного блока. Например:

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

Можем ли мы сделать это на готовый HTML с javascript/jQuery, например добавление скрипта к первому фрагменту ave, как второй? Какая-то функция $('.wrapper').minify();.

EDIT

Кто-то предложил возможный дубликат с How to minify HTML with CSS and Javascript?. Этот вопрос связан с уменьшением размера страницы путем редактирования файлов на стороне сервера. Здесь я ищу решение, которое минимизирует определенный элемент после передачи содержимого без редактирования html-файлов. Проблема заключается не в размере страницы, а в пробеле пробелов.

Answer 1

Использование JQuery вы можете удалить все textnodes, которые являются потомками 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>

Answer 2

Чистый CSS способ сделать это, чтобы установить font-size родительского элемента 0

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

 
.wrapper { 
 
    font-size: 0; 
 
}

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

Answer 3

Если вы беспокоитесь о глобальном font-size, то вы можете попробовать использовать комментарии

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