JavaScriptで複数項目の条件を絞り込み、bootstrapのサイトに詰めて表示させる方法

前提・実現したいこと

bootstrapのサイトに複数項目で条件を絞り込み、該当の項目のみ表示させたい。

発生している問題・エラーメッセージ

複数項目で条件を絞り込むJavaScriptを参考にさせていただいたページから引用させていただいたのですが、
それをbootstrapのdivの中に入れると、絞り込んで該当から外れた要素が空白で残ってしまいます。
見た目をdispley:none;のようにしたいのですが、visivility:hidden;のように見える状態です。
該当の項目だけを詰めて表示させるにはどうしたらいいのでしょうか

該当のソースコード

　・
・
・

<div class="row"> <div class="col-lg-4 col-md-6 col-12"> <li class="list_item" data-price="40,000円" data-season="春夏" data-pattern="チェック" data-color="カーキ">生地番号:0001 値段: 40,000円種類: 春夏柄: チェック色: カーキ <div class="product-wrapper mb-60"> <div class="product-img"> <a href="product-details.html"> <img alt="" src="assets/img/products/11.jpg"> </a> </div> </div> </li> </div> 　・　・　・ </div> 　・　・　・ <script> var searchBox = '.search-box'; // 絞り込む項目を選択するエリア var listItem = '.list_item'; // 絞り込み対象のアイテム var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名

$(function() {
    // 絞り込み項目を変更した時
    $(document).on('change', searchBox + ' input', function() {
        search_filter();
    });
});

/**
 * リストの絞り込みを行う
 */
function search_filter() {
    // 非表示状態を解除
    $(listItem).removeClass(hideClass);
    for (var i = 0; i < $(searchBox).length; i++) {
        var name = $(searchBox).eq(i).find('input').attr('name');
        // 選択されている項目を取得
        var searchData = get_selected_input_items(name);
        // 選択されている項目がない、またはALLを選択している場合は飛ばす
        if(searchData.length === 0 || searchData[0] === '') {
            continue;
        }
        // リスト内の各アイテムをチェック
        for (var j = 0; j < $(listItem).length; j++) {
            // アイテムに設定している項目を取得
            var itemData = $(listItem).eq(j).data(name);
            // 絞り込み対象かどうかを調べる
            if(searchData.indexOf(itemData) === -1) {
                $(listItem).eq(j).addClass(hideClass);
            }
        }
    }
}

/**
 * inputで選択されている値の一覧を取得する
 * @param  {String} name 対象にするinputのname属性の値
 * @return {Array}       選択されているinputのvalue属性の値
 */
function get_selected_input_items(name) {
    var searchData = [];
    $('[name=' + name + ']:checked').each(function() {
        searchData.push($(this).val());
    });
    return searchData;
}
</script>

試したこと

JavaScriptについてのサイトを見ながら、それらしい記述をいくつか入れて見ましたが、うまく表示されませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

x_x

2019/11/05 07:15

div 要素の子として li は取れません。参考にしたものと比べて修正してみてください。

mmomiji

2019/11/05 07:43

すみません。記述したdiv要素の上にulがあります。すごく長くなってしまうので割愛してしまいました。参考にしたものは、リストとして成立してて、リストで記述した場合うまくいきました。それをbootstrapの<div class="col-lg-4 col-md-6 col-12">のdivに入れた場合、該当のものと同じように、選択の該当外のものも空白でスペースを取ってしまうので、見た目が歯抜け状態での表示になってしまいます。該当のものだけを詰めて表示させるには、JavaScriptを書き直すのか、CSSで何か上手い書き方があるのか分からず、行き詰まってしまっている状態です。

mmomiji

2019/11/06 01:40

すみません。ありがとうございました。自己解決しました。リストをやめて<div class="col-lg-4 col-md-6 col-12">のなかにliタグの中身を入れたら、ちゃんと動作しました。大変お騒がせしました。