Everytime I send a new data it just adds up to the list. Is there a vanilla JS code that can delete the old li first then add?

[hinzwifi]

function gotData(data) {

          var scores = data.val();

          var keys = Object.keys(scores);

          for (var i = 0; i < keys.length; i++) {
            var k = keys[i];

            var name = scores[k].name;
            var score = scores[k].score;
            console.log(name,score);
            
        parentElement = document.getElementById('scorelist');
        childElement = document.createElement('li');
        appendChildElement = parentElement.appendChild(childElement);
        appendChildElement.innerHTML = name + ': ' + score;
      
        }
        
        
        }

 

[jj9987]

What is your aim? Is it only supposed to display one or a limited number? If the latter, then do you want to remove the first one or the last one?

If the first one, then just replace the element. If you have a limited number, then one way would be to delete the parent element and recreate the number of elements you need.

[shadow_ray]

5 minutes ago, hinzwifi said:

function gotData(data) {

          var scores = data.val();

          var keys = Object.keys(scores);

          for (var i = 0; i < keys.length; i++) {
            var k = keys[i];

            var name = scores[k].name;
            var score = scores[k].score;
            console.log(name,score);
            
        parentElement = document.getElementById('scorelist');
        childElement = document.createElement('li');
        appendChildElement = parentElement.appendChild(childElement);
        appendChildElement.innerHTML = name + ': ' + score;
      
        }
        
        
        }

 

 

var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);

 

[hinzwifi]

My aim is to display all the scores that the participants sent to the firebase database both the highscore and their nickname

[hinzwifi]

3 minutes ago, shadow_ray said:

 

var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);

 

 

var elem = document.querySelector('ol');
elem.parentNode.removeChild(elem);

So like I added that then nothing displayed

Edited May 22, 2021 by hinzwifi
im retard

[hinzwifi]

Btw this is my html code

<div id="main">
    <ol id="scorelist" >

  </ol>
  </div>

 

[C2dan88]

If you want to clear all the li's from the list you can just set the innerHTML of the scoreList element to empty

parentElement = document.getElementById('scoreList');
parentElement.innerHTML = ''; // clear all li's from list

 

[shadow_ray]

if you only want to delete the first li in the list:

var elem = document.querySelector('#scorelist > li:nth-child(1)');
elem.parentNode.removeChild(elem);