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

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

jQuery.expr['：']['contains-insensitive']=函数（a，i，m）{
返回jQuery（a）.text（）.toUpperCase（）.indexOf（m[3].toUpperCase（））>=0；
};
变量$box=$（'.box'）；
$（'#search'）。关于（'input'，函数（e）{
$box.show（）；
$（'.title'）.filter（`:not（：包含不敏感（'${this.value}'））`）；
});
.content{
显示：网格；
栅隙：20px；
网格模板列：重复（自动填充，最小值（80px，1fr））；
背景色：红色；
}

约翰

其他内容。
杰克

其他内容。
简

其他内容。
詹妮

其他内容。
要实现此功能，您需要隐藏包装
.box
的
a
元素，而不仅仅是
.box
。试试这个：


jQuery.expr['：']['contains-insensitive']=函数（a，i，m）{
返回jQuery（a）.text（）.toUpperCase（）.indexOf（m[3].toUpperCase（））>=0；
};
变量$a=$（'.content a'）；
$（'#search'）。关于（'input'，函数（e）{
$a.show（）.find（'.title'）.filter（`:not（：contains insensitive（'${this.value}'））`）；
});
.content{
显示：网格；
栅隙：20px；
网格模板列：重复（自动填充，最小值（80px，1fr））；
背景色：红色；
}

约翰

其他内容。
杰克

其他内容。
简

其他内容。
詹妮

其他内容。
简单。而不是隐藏
.box
元素隐藏其父元素（
a
）


jQuery.expr['：']['contains-insensitive']=函数（a，i，m）{
返回jQuery（a）.text（）.toUpperCase（）.indexOf（m[3].toUpperCase（））>=0；
};
变量$box=$（'.box'）；
$（'#search'）。关于（'input'，函数（e）{
$box.parent（）.show（）；
$（'.title'）.filter（`:not（：包含不敏感（'${this.value}'））`）；
});
.content{
显示：网格；
栅隙：20px；
网格模板列：重复（自动填充，最小值（80px，1fr））；
背景色：红色；
}

约翰

其他内容。
杰克

其他内容。
简

其他内容。
詹妮

其他内容。
不要隐藏
.box
divs，而是隐藏父
a
标记


jQuery.expr['：']['contains-insensitive']=函数（a，i，m）{
返回jQuery（a）.text（）.toUpperCase（）.indexOf（m[3].toUpperCase（））>=0；
};
变量$a=$（'a'）；
$（'#search'）。关于（'input'，函数（e）{
$a.show（）；
$（'.title'）.filter（`:not（：包含不敏感（'${this.value}'））`）；
});
.content{
显示：网格；
栅隙：20px；
网格模板列：重复（自动填充，最小值（80px，1fr））；
背景色：红色；
}

约翰

其他内容。
杰克

其他内容。
简

其他内容。
詹妮

其他内容。
使用“显示无”并使用不起作用的特定类名对其进行筛选。请注意，从搜索框中删除值时，不会再次显示所有项目