How to Deal with Hidden Element without Removing it – updating DOM length when Element hidden

I have a list of brand names looking like this:

each element has a border-bottom style and I used the below code to remove border-bottom style when there are less than 5 elements and it works perfectly until you make a search and some of these elements are hidden. The problem is because even display = ‘none’; doesn’t remove the elements from DOM. According to DOM, its length is the same so even there is one element and others are hidden border style is there. (img below code)

&: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;
}

Removing elements from DOM instead of hiding works, but I need these elements later so I can’t remove them. I want elements to have a border If a row has more than 5 elements. How can I tackle this issue of hidden elements? Open to any suggestions.

Answer

I don’t know any exact property to use it, but here are some tricks you can use.
Just put the hidden element in a class and style it with display:none.

After adding that class, just use:

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