CSS网格 - 使用jQuery删除元素，这样他们就不会占用空间

Question

所以我有一个带有＆＃34; box＆＃34;的css网格布局。在里面，我用文本输入和javascript过滤。如何隐藏已滤除的元素，以便它们甚至不会占用网格中的空间（因此所显示的元素会向前滑动）？

＆＃13;

＆＃13;

jQuery.expr[':']['contains-insensitive'] = function(a, i, m) {
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
var $box = $('.box');
$('#search').on('input', function(e) {
  $box.show();
  $('.title').filter(`:not(:contains-insensitive('${this.value}'))`).closest('.box').hide();
});

＆＃13;

.content {
        	display: grid;
        	grid-gap: 20px;
        	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr) ) ;
          background-color: red;
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<div class="content">
            <a>
                <div class="box">
                    <p class="title">John</p>
                    Other content.
                </div>
            </a>
            <a>
                <div class="box">
                    <p class="title">Jack</p>
                    Other content.
                </div>
            </a>
            <a>
                <div class="box">
                    <p class="title">Jane</p>
                    Other content.
                </div>
            </a>
            <a>
                <div class="box">
                    <p class="title">Jenny</p>
                    Other content.
                </div>
            </a>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

要完成这项工作，您需要隐藏包裹a的{​​{1}}元素，而不仅仅是.box。试试这个：

.box

jQuery.expr[':']['contains-insensitive'] = function(a, i, m) {
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

var $a = $('.content a');
$('#search').on('input', function(e) {
  $a.show().find('.title').filter(`:not(:contains-insensitive('${this.value}'))`).closest('a').hide();
});

.content {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  background-color: red;
}

Answer 2

简单。而不是隐藏.box元素隐藏他们的父母（a）

＆＃13;

＆＃13;

jQuery.expr[':']['contains-insensitive'] = function(a, i, m) {
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
var $box = $('.box');
$('#search').on('input', function(e) {
  $box.parent().show();
  $('.title').filter(`:not(:contains-insensitive('${this.value}'))`).closest('.box').parent().hide();
});

＆＃13;

.content {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<div class="content">
  <a>
    <div class="box">
      <p class="title">John</p>
      Other content.
    </div>
  </a>
  <a>
    <div class="box">
      <p class="title">Jack</p>
      Other content.
    </div>
  </a>
  <a>
    <div class="box">
      <p class="title">Jane</p>
      Other content.
    </div>
  </a>
  <a>
    <div class="box">
      <p class="title">Jenny</p>
      Other content.
    </div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

不要隐藏.box div，而是隐藏父a标记。

＆＃13;

＆＃13;

jQuery.expr[':']['contains-insensitive'] = function(a, i, m) {
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
var $a = $('a');
$('#search').on('input', function(e) {
  $a.show();
  $('.title').filter(`:not(:contains-insensitive('${this.value}'))`).closest('a').hide();
});

＆＃13;

.content {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr) ) ;
    background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<div class="content">
    <a>
        <div class="box">
            <p class="title">John</p>
            Other content.
        </div>
    </a>
    <a>
        <div class="box">
            <p class="title">Jack</p>
            Other content.
        </div>
    </a>
    <a>
        <div class="box">
            <p class="title">Jane</p>
            Other content.
        </div>
    </a>
    <a>
        <div class="box">
            <p class="title">Jenny</p>
            Other content.
        </div>
    </a>
</div>

＆＃13;

＆＃13;

＆＃13;