0
288
ViewsHow 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.
1 answers
Answer question0
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;