How to get the Element ID in a for loop?

Question

Hello I have the following code:

function updateData() {

  var element = document.getElementById('elementId');
  element.remove(); ** //Here i want to remove my elements**

  return firebase.database().ref(varurl3).child('UserCount/count').once('value').then(function(snapshot) {
    var username = snapshot.val();


    for (var i = 1; i <= username; i++) {

      var ref = firebase.database().ref(varurl3).child('Users').child(i).child('User');
      ref.once('value', function(snapshot) {
        var changedPost = snapshot.val();
        var log = document.createElement('div');
        log.setAttribute('id', 'elementId');
        log.style.height = '75px';
        log.style.width = '300px';
        log.style.overflow = 'auto';
        log.style.border = '1px solid #666';
        log.style.backgroundColor = '#ccc';
        log.style.padding = '8px';
        log.style.position = 'relative';
        log.style.left = '1400px';
        log.style.top = '300px';
        log.style.margin = '10px';
        log.textContent = changedPost;
        document.body.appendChild(log)
      });
    }
  });
}

(async function looper() {
  while (true) { // forever
    await updateData();
    await delay(2000);
  }
})(); // execute looper

My function is called every 2 seconds to retrieve values from my firebase database and write them into divs every 2 seconds. Therefore i create with a for loop as many divs as i have values in my database. When the function is called again from new all div elements with the same ID should be deleted, so that they don't duplicate on the next run.

But these div elements are not deleted and I get the error message:

Uncaught (in promise) TypeError: element is null

Could someone please help me how I can solve this problem?

Answer 1

Element Ids need to be unique, so there is no way to fetch all elements with the same ID in one call.

You could try setting your divs to have a common tag, and use getElementsByTagName to collect them all up for deletion.

This post may be a useful reference: Javascript: getElementById vs getElementsById (both works on different pages)