每次删除DOM元素（在获取后）

Question

[嗨，我正在尝试使用原始JavaScript构建游戏仪表板。问题是，它始终显示前一个元素。我使用setInterval进行刷新。

这里是一个例子

JavaScript

function fetching() {
...
  .then(data => {
     dataApply(data)
  })
...
}


function dataApply(data) {
  data.EneymyHealth.forEach(monster => {
    if (monster.isAlive) {                    //Check monster alive
     const p = document.createElement('p');   //Create <p> element
     p.innerHTML = monster.HP;                //Add monster's HP into <p>
     enemyWrapper.appendChild(p);             //Attach <p> into <div id="wrapper">
   }
 })
}

setInterval(fetching, 1000);

但是当我通过网络浏览器检查时。结果很奇怪。

<div id="wrapper">
  ....
  <p>2000</p>
  <p>2000</p>
  <p>2000</p>
  ....
</div>

它由setInterval循环，但<p>元素不会删除。它仍然显示前一个。

如何删除它？谢谢您的回答。

注

1. 我想建立一个实时的怪物仪表板。因此，我认为setInterval是实时HP怪物的最佳选择。 （已与第三方游戏同步）

Answer 1

问题是您在运行循环之前没有移除敌人

您要做的是

enemyWrapper.querySelectorAll('.enemy').forEach((currEnemy) {
    currEnemy.remove();
});
data.EneymyHealth.forEach(monster => {
    if (monster.isAlive) {                    //Check monster alive
       const p = document.createElement('p');   //Create <p> element
       p.classList.add('enemy')
       p.innerHTML = monster.HP;                //Add monster's HP into <p>
       enemyWrapper.appendChild(p);             //Attach <p> into <div id="wrapper">
    }
})

[我所做的是，我向所有敌人添加了类敌人，然后在将其添加到DOM之前，删除了所有敌人，以便只能在DOM中重新渲染活着的敌人

Answer 2

我修复了它。谢谢大家。

我必须清除后才能开始添加新的。

enemyWrapper.innerHTML = '';            //Clear innerHTML
data.EneymyHealth.forEach(monster => {   //Mapping array into DOM
    ....
)