Скрыть div на основе индекса

Question

Я пытаюсь скрыть div на основе полученного индекса. Я не уверен, как я могу использовать этот индекс, чтобы скрыть div.

document.getElementById("medicalCard").style.display = "none";

Приведенная выше строка обслуживает только первый div, но может быть несколько medicalCard div

Я получаю Индекс обратно правильно с моим методом ниже. Я просто не уверен, как добавить индекс к приведенному выше коду.

  removeMedicalProvider(index: number){
    console.log(index);
    this.delete.emit(index);
    document.getElementById("medicalCard").style.display = "none";
  }

HTML

<div id="medicalCard" class="card mb-4" *ngFor="let provider of companyMedicalAidProvider; let i = index;">
...
...
</div>

Answer 1

С помощью селекторов css вы можете выбрать правильный индекс, чтобы вам не приходилось извлекать все элементы. Поскольку nth-child начинается с 1, вы можете использовать ++index.

function hideIndex(index) {
  document.querySelector(`.card:nth-child(${++index})`).style.display = "none";
}
hideIndex(2);

<div id="medicalCard" class="card mb-4">
  0
</div>
<div id="medicalCard" class="card mb-4">
  1
</div>
<div id="medicalCard" class="card mb-4">
  2
</div>
<div id="medicalCard" class="card mb-4">
  3
</div>

Answer 2

Это невозможно сделать с идентификатором, потому что должен быть только один элемент с данным идентификатором. Вы можете использовать классы для этого, если вам необходимо.

Например, если ваши карты имеют следующую HTML разметку:

<li class="card mb-4 medical-provider" *ngFor="...">
  ...
</li>

, вы можете выбрать их, используя querySelectorAll:

const cards = document.querySelectorAll('.medical-provider');
// hide the one at the given index
cards[index].style.display = 'none';