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

所以我有一个css网格布局，里面有“boxes”，用文本输入和javascript过滤。如何隐藏使用jQuery过滤掉的元素，使它们甚至不占用网格内的空间(因此显示的元素滑到前面)？

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

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

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

最佳答案

为了使这项工作有效，您需要隐藏包装a的.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;
}

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