如何在不删除隐藏元素的情况下处理隐藏元素 - 隐藏元素时更新 DOM 长度答案

【问题标题】：How to Deal with Hidden Element without Removing it - updating DOM length when Element hidden如何在不删除隐藏元素的情况下处理隐藏元素 - 隐藏元素时更新 DOM 长度
【发布时间】：2022-01-09 18:24:11
【问题描述】：

我有一个如下所示的品牌名称列表：

每个元素都有一个边框底部样式，当元素少于 5 个时，我使用下面的代码删除边框底部样式，并且它可以完美运行，直到您进行搜索并且其中一些元素被隐藏。问题在于即使 display = 'none'; 也不会从 DOM 中删除元素。根据 DOM，它的长度是相同的，所以即使只有一个元素，其他元素都是隐藏的边框样式。（下面是代码）

&:nth-child(5n+1):nth-last-child(-n+5), &:nth-child(5n+1):nth-last-child(-n+5) ~ .brands__list-item {
  @apply lg:border-b-0;
}

从 DOM 中移除元素而不是隐藏元素是可行的，但我稍后需要这些元素，所以我无法移除它们。我希望元素有一个边框如果一行有超过 5 个元素。我该如何解决隐藏元素的问题？接受任何建议。

【问题讨论】：

标签： javascript html css tailwind-css

【解决方案1】：

我不知道使用它的任何确切属性，但这里有一些你可以使用的技巧。
只需将隐藏的元素放在一个类中并使用display:none 对其进行样式设置。

添加该类后，只需使用：

length2=DOM.classList.contains('classWithHiddenProp');
totalLength_of_DOM = totalLength - length2;

【讨论】：

我更新了您的帖子以使用代码突出显示（并将答案更改为降价）。在此处查看帮助：stackoverflow.com/help/formatting
好的，你删除了编辑，nvm。
@ShivamSharma 哦，不用担心，它可以像您一样与 <br> 一起使用。我将再次格式化问题，以便您可以看到差异 - 看起来更清晰。帮助页面供您阅读。
@Shivam Sharma 感谢您的回复！！你的逻辑帮助我解决了我的问题。