Jak se vypořádat se skrytým prvkem bez jeho odstranění – aktualizace délky DOM, když je prvek skrytý

Mám seznam názvů značek, který vypadá takto:

každý prvek má styl border-bottom a níže uvedený kód jsem použil k odstranění stylu border-bottom, když je méně než 5 prvků a funguje to perfektně, dokud neprovedete vyhledávání a některé z těchto prvků nejsou skryté. Problém je v tom, že i zobrazit =‚žádný‘; neodstraní prvky z DOM. Podle DOM je jeho délka stejná, takže i tam je jeden prvek a ostatní jsou skryté. (obrázek pod kódem)

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

Odstranění prvků z DOM místo skrytí funguje, ale tyto prvky potřebuji později, abych je nemohl odstranit. Chci, aby prvky měly ohraničení Pokud má řádek více než 5 prvků. Jak mohu vyřešit tento problém skrytých prvků? Otevřít jakékoli návrhy.

Odpověď

Neznám žádnou přesnou vlastnost, jak ji použít, ale zde je několik triků, které můžete použít.
Stačí umístit skrytý prvek do třídy a upravit jej pomocí display:none .

Po přidání této třídy stačí použít:

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