jQuery 隐藏元素并释放 space

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();
    }
}

问题是，当元素被隐藏时，它们仍然采用 space，如此处所示

我想知道如何在隐藏后完全释放 space，就像 remove() 一样。

我也试过将可见性改为隐藏，但还是不行

我在前端使用 Materialise

Answer 1

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

试试这个：

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

jQuery 隐藏元素并释放 space

jQuery hide elements and free space

javascript

css

jquery

hide

materialize