Javascript 每次（提取后）删除DOM元素

嗨，我正在尝试用香草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);

函数获取（）{
...
。然后（数据=>{
数据应用（数据）
})
...
}
函数数据应用（数据）{
data.EneymyHealth.forEach（monster=>{
如果（monster.isAlive）{//检查monster alive
const p=document.createElement（'p'）；//创建元素
p、 innerHTML=monster.HP；//将monster的HP添加到
enemyWrapper.appendChild（p）；//将附加到
}
})
}
设置间隔（取数，1000）；

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

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

....
2000年

2000年

2000年

....

它由

setInterval

循环，但

元素不会删除。它仍然显示以前的一个

我怎样才能删除它？谢谢你的回答

注

我想建立一个实时怪物仪表盘。因此，我认为

setInterval

是实时HP monster的最佳选择。（与第三方游戏同步）

---

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

你要做的是

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">
    }
})

enemyWrapper.querySelectorAll（'.敌军'）.forEach（（敌军）{
删除（）；
});
data.EneymyHealth.forEach（monster=>{
如果（monster.isAlive）{//检查monster alive
const p=document.createElement（'p'）；//创建元素
p、 类列表。添加（'敌人'）
p、 innerHTML=monster.HP；//将monster的HP添加到
enemyWrapper.appendChild（p）；//将附加到
}
})

---

我所做的是，我将类敌人添加到所有敌人中，并在将其添加到DOM之前删除所有敌人，以便只有活着的敌人可以在DOM中重新渲染

我修复了它。谢谢大家

我必须在开始添加新的之前进行清除

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

---

你确定每个物品的monster.HP值不同吗？请粘贴data.eneymyhealth的内容，它将更改

p.innerHTML=monster.HP

to

p.textContent=moster.HP；enemyWrapper.innerHTML=''

.textContent

以防止HTML解析错误

enemyWrapper.innerHTML='

清除

enemyWrapper

元素，而无需对子元素进行测试。当然，我要问为什么它是在一段时间内？@PatrissolKenfack我确信monster.HP不会复制。我只是给你们看一个游戏中1个怪物（HP）的例子@StackSlave我使用setInterval进行实时更新。（我与第三方游戏同步。）如果您有任何方法，请建议我。此外，您的答案

enemyWrapper.innerHTML='

也可以使用。谢谢