Удалить элемент DOM каждый раз (после извлечения) - PullRequest
Новая
       7

Удалить элемент DOM каждый раз (после извлечения)

0 голосов
/ 20 марта 2020

Привет. Я пытаюсь создать игровую панель с ванилью 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 в реальном времени. (Синхронизируется со сторонней игрой)

Ответы [ 2 ]

1 голос
/ 20 марта 2020

Проблема в том, что вы не удаляете врага перед запуском l oop

Что вам нужно сделать, это 

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

могут быть отрисованы только живые враги
0 голосов
/ 22 марта 2020

Я исправил это. Спасибо всем.

Я должен очистить перед началом добавить новый. 

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