CSS или JS - Скрыть старые элементы из html

Question

У меня есть набор параметров в файле html моего проекта Ioni c 4:

<! –– page 1 ––>
<p *ngIf="x1">Text 1</p>
<p *ngIf="x2">Text 2</p>
<p *ngIf="x3">Text 3</p>

<! –– page 2 ––>
<p *ngIf="x4">Text 4</p>
<p *ngIf="x5">Text 5</p>
<p *ngIf="x6">Text 6</p>

<! –– page 3... ––>

У меня есть publi c counter = 0, начиная с 0, считая +1 на клике , Я управляю вышеупомянутыми параграфами через ngIf, устанавливая их "true" в ts (если counter = 4, x4 = true).

Я хочу установить автоматическое правило, либо CSS, либо ts, который ограничивает количество абзацев, видимых на веб-странице (без установки значения ngIf для абзацев в false).

Условия и замечания: поэтому, когда x4 виден, тогда x1, x2, x3 не должны быть видны , Только 3 абзаца должны быть видны одновременно с учетом правила страницы. Это правило должно применяться ко всем позициям чисел на странице (например, если counter = 5, x5 = true), должны быть видны только x4 и x5 (x6 = false, в то время как счетчик не достиг его).

Каким будет ваше решение?

Answer 1

Давайте получим абзацы:

var paragraphs = document.querySelectorAll("p");

Определим лимит абзацев:

var limit = 10; //You can change this value any time

и давайте скроем абзацы за пределом:

for (let index = limit; index < paragraphs.length; index++) {
    paragraphs[index].style.display = "none";
}