JQuery скрыть элементы и свободное пространство - PullRequest
Новая
       22

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

1 голос
/ 25 марта 2019

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

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

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

enter image description here

enter image description here

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

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

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

1 Ответ

1 голос
/ 25 марта 2019

Это потому, что вы пытаетесь скрыть родительский ярлык (<p class="range-field">), но вам нужно скрыть <div class="col m4 s12">

Попробуйте это: 

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