Javascript 隐藏div框并删除空间

我有一个导航，您可以通过它过滤div框：

<ul>
   <li><a href="javascript:void(0);" data-target="apples">Appels</a></li>
   <li><a href="javascript:void(0);" data-target="bananas">Bananas</a></li>
   <li><a href="javascript:void(0);" data-target="pineapples">Pineapples</a></li>
</ul>

<div class="fruits bananas apples pineapples"></div>  
<div class="fruits bananas"></div>
<div class="fruits pineapples apples"></div>

我还有两个问题：

• 在前端我有五行，每行包含三个分区水果盒。每个div的宽度为33%。上面的函数实现了不需要的div框的隐藏，但是，例如，如果正在隐藏的唯一框是第1行的最后一个框，那么第2行的第一个框不会自动上移到隐藏框所在的位置，相反，隐藏框会留下空白

• 我的第二个要求：假设您点击了apple链接以过滤所有的“苹果”框-如果在此之后您决定点击“菠萝”链接，那么在新的过滤查询中当然需要考虑在点击apple之后可能隐藏的所有div框

我将非常感谢您的代码建议

我的小提琴来了：

---

单击“苹果”查看我的问题…

您的问题依赖于此样式

.fruits:nth-child(3n) {
    margin-right:0;
}

---

删除此项并将您的

.fruits

类

页边距权限

属性更改为

0.3%

也共享CSS。。。或者你最好创建一个小提琴并共享链接！我们是不是应该在脑海中想象这一切，并想出一个解决办法？@tilwinjoy我正在做小提琴。我是小提琴新手：我如何保存我的小提琴？我生成的链接不起作用，当我在其他浏览器中打开它时，代码也不会显示example@sunny好了，我的小提琴来了：@tilwinJoy在小提琴里，点击“苹果”查看我的问题

.fruits:nth-child(3n) {
    margin-right:0;
}