HTML javascript无法按id删除第n个元素

我不熟悉javascript和HTML。我使用node+express后端和bootstrap+html+JS前端开发了网站。我使用BS4创建了一些卡片。看起来像是

代码：

个案总数
过去30天
最后7天
生长
死亡

如果计数>0，我想再添加一张卡。我已经创建了第五张卡之前的外部div，它可以很好地与下面的脚本配合使用

var deathCount = <%- areaDeaths%>;
if (deathCount == 0){
    document.getElementById("divDeath").style.display = "none";
};

var死亡计数=；
如果（死亡人数==0）{
document.getElementById（“divDeath”）.style.display=“无”；
};

但是，新卡未正确对齐。不管怎样，我可以让这种身份证的第五个元素消失而不影响这些卡的对齐

迄今为止：

var deathCount = <%- areaDeaths%>;
if (deathCount == 0){
    var elements = document.getElementById("mainCards").children;
    elements.item(4).style.display = "none";
};

var死亡计数=；
如果（死亡人数==0）{
var elements=document.getElementById（“mainCards”）.children；
elements.item（4）.style.display=“无”；
};

不能在多个元素中使用同一id。一开始使用id似乎比较容易，但这不是一个好的做法。如果你真的需要，就用它。“不损害对齐”是什么意思？如果您将5张卡版本的图像和您想要实现的设计放在一起会更好。@BülentAkgül我尝试过选择名称而不是id，名称对于最后一个值是唯一的，它仍然不会消失。在不损害对齐方式的情况下，若你们从容器中取出一张卡，剩下的四张卡应该占据剩余的空间，右边的空间不应该是空白的。这可以通过CSS来完成。卡片组应具有显示：flex，卡片应具有flex:1。并从卡上移除宽度。

var deathCount = <%- areaDeaths%>;
if (deathCount == 0){
    var elements = document.getElementById("mainCards").children;
    elements.item(4).style.display = "none";
};