title: Deleting old list and showing new list
body: <p>Old and New Records are shown together.</p>
  
  <p>I add content to the DB and it is displayed as soon it is added (button event listener). But when the content is shown it is shown like-</p>
  
  <ul>
  <li>Content1 </li>
  <li>Content2</li>
  </ul>
  
  <p><strong><em>(This is the old content list)</em></strong></p>
  
  <ul>
  <li>Content1</li>
  <li>Content2 </li>
  <li>Content3</li>
  </ul>
  
  <p>The page shows Content 1-2 and Content 1-3.</p>
  
  <p>It should only show -</p>
  
  <ul>
  <li>Content1</li>
  <li>Content2 </li>
  <li>Content3</li>
  </ul>
  
  <p><strong><em>This is the correct list and the desired output.</em></strong></p>
  
  <p>The correct list is shown when I refresh the page and the list is fetched from the DB itself.</p>
  
  <p>Code-</p>
  
  <pre><code>function showData() {
  
  
  
  database.on("value", function (snapshot) {
  
  
  
      var listings = document.getElementsByClassName("contentClass");
      for (var j = listings.length; j &lt; 0; j++) {
          listings[j].remove();
      }
  
      var dbData = snapshot.val();
      var keys = Object.keys(dbData);
      keys = keys.reverse();
  
      for (var i = 0; i &lt; keys.length; i++) {
  
          var k = keys[i];
          var textContent = dbData[k].content;
          var timeContent = dbData[k].time;
          var dateContent = dbData[k].date;
  
          var newDiv = document.createElement("div");
          newDiv.classList.add("contentClass");
          var something = `
              &lt;div class="dataDiv"&gt;
              ${textContent + "&lt;br /&gt;" + timeContent + "&lt;br /&gt;" + dateContent}
              &lt;/div&gt;
          ` ;
  
          newDiv.innerHTML = something;
          content.appendChild(newDiv);
  
      }
  
  })
  
  
  }
  
  showData();
  </code></pre>
  
  <p>How do I make sure the old list is not generated whenever I add new content and display it on my page. </p>