JQuery скрыть элементы и свободное пространство

Я показываю список флажков, используя этот код:

<div class = "col m12 s12">

    <input id = "search" type = "text" autocomplete = "off" placeholder = "Compétence..." oninput = "update();">

    {% for keyword in keywords %}
        <div class = "col m4 s12">
            <p class = "range-field">
                <input type = "checkbox" id = "{{loop.index}}" name = "{{keyword.title}}" class = "filled-in"/>
                <label for = "{{loop.index}}">{{keyword.title}}</label>
                <input type = "range" min = "0" max = "100"/>
            </p>
        </div>
    {% endfor %}

</div>

Когда я начинаю поиск, отображаются только элементы, соответствующие тексту, а другие скрыты

function update()
{
    var res = $.trim($("#search").val());
    if (res === "")
    {
        $("label").parent().show();
    }
    else
    {
        contains_selector = "label:isLike("+res+")"
        $(contains_selector).parent().show();
        not_contains_selector = "label:not(:isLike("+res+"))"
        $(not_contains_selector).parent().hide();
    }
}

Проблема в том, что когда элементы скрыты, они все еще занимают место, как показано здесь.

Я хотел бы знать, как я могу полностью освободить пространство после скрытия, как это делает remove().

Я также пытался изменить видимость на скрытую, но это все равно не работает.

Я использую Materialize для интерфейса