Search code examples
javascriptjquerycsshidematerialize

jQuery hide elements and free space

I am displaying a list of checkboxes using this code :

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

When I start searching, only elements matching the text are shown while others are hidden

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

The problem is that when elements are hidden, they still take space as shown here

enter image description here

enter image description here

I would to know how can I completely free the space after hiding, just like remove() does.

I also tried changing visibility to hidden but it still does not work

I am using Materialize for frontend

Solution

  • This is because you try to hide parent of label (<p class="range-field">), but you need to hide <div class="col m4 s12">

    Try this:

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