jQuery隐藏元素和可用空间

Question

我正在使用此代码显示复选框列表：

<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作为前端

Answer 1

这是因为您尝试隐藏标签（<p class="range-field">）的父级，但是您需要隐藏<div class="col m4 s12">

尝试一下：

$(contains_selector).closest(".col").show();
...
$(contains_selector).closest(".col").hide();