How to hide json by pressing button?-CodePudding

So, I want to make two buttons one for showing json data (animals-1.json,animals-2.json animals-3.json, ... it depends of pageCounter which is working fine) and second button for deleting first showed json on screen. Every json has only one number written for example animals-1.json shows number 1, animals-2.json shows number 2 and so on... so when first button is clicked SHOW 3 times it will show on screen numbers 1 2 3 and when I click second button HIDE I want first number to dissapear and show on screen only numbers 2 3 (animals-2.json and animals-3.json). How to do this? Thanks :) html:

<!DOCTYPE html>
<html>
<body>


<h2>next is</h2>
<button id="btn">SHOW</button>
<button id="btnn" >HIDE</button>
<div id="animal-info"></div>
<div id="nome"></div>
<script src="skripta.js"></script>

</body>
</html>

js:

 var pageCounter = 1;
   
    var animalContainer = document.getElementById("animal-info");
    
    var btn = document.getElementById("btn");
    var btnn = document.getElementById("btnn");
    
    btn.addEventListener("click", function(){
    
    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET','http://10.0.9.243/animals-'  pageCounter   '.json');
    ourRequest.onload = function(){
      var ourData = JSON.parse(ourRequest.responseText);
      renderHTML(ourData);
    };
    ourRequest.send();
    pageCounter  ;
    });
    
    function renderHTML(data) {
    var htmlString  = "";
    for (i=0; i < data.length; i  ){
      htmlString  = "<p>"   data[i].name    "</p>"
    }
    animalContainer.insertAdjacentHTML('beforeend', htmlString);
    
    
    }

CodePudding user response：

The best way is adding the class name in htmlString elements.

function renderHTML(data) {
var htmlString  = document.createElement("div");
for (i=0; i < data.length; i  ){
  let pText = document.createTextNode(data[i].name);
  let pElement = document.createElement("p");
  pElement.append(pText);
  htmlString.append(pElement);
  htmlString.classList.add('containers') // new Line added
  }
animalContainer.append(htmlString);
}

btnn.addEventListener("click", function(){
let containers = document.getElementsByClassName('containers');
if(containers.length > 0){
    containers[0].remove();
}
  });