Javascript 基于索引隐藏div

我试图根据我得到的索引隐藏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

...
...

这不能用ID来完成，因为只有一个元素具有给定的ID。如果必须，可以使用类来完成

例如，假设您的卡具有以下HTML标记：

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

---

使用css选择器，您可以选择正确的索引，因此不必检索所有元素。因为第n个子项

从1开始，所以可以使用
++index


函数hideIndex（索引）{
document.querySelector（`.card:n个子（${++index}）`）.style.display=“无”；
}
hideIndex（2）

0
1.
2.
3.
id选择器只返回1个元素，因为id需要唯一。使用
querySelectorAll（）
并使用css选择器获取正确的索引。永远不要使用重复的ID，而应该使用类名
<li class="card mb-4 medical-provider" *ngFor="...">
  ...
</li>

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