如何通过按下按钮隐藏 json？

Question

所以，我想制作两个按钮，一个用于显示 json 数据（animals-1.json，animals-2.json animals-3.json，...取决于工作正常的 pageCounter），第二个用于删除的按钮首先在屏幕上显示 json。每个 json 只有一个数字，例如 animals-1.json 显示数字 1，animals-2.json 显示数字 2 等等...所以当第一个按钮被点击时显示 3 次将在屏幕上显示数字 1 2 3，当我单击第二个按钮隐藏时，我希望第一个数字消失并在屏幕上仅显示数字 2 3（动物-2.json 和动物-3.json）。这该怎么做？谢谢：） 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);
    
    
    }

Answer 1

最好的方法是在 htmlString 元素中添加 class 名称。

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();
}
  });

如何通过按下按钮隐藏 json？

How to hide json by pressing button?

javascript

ajax

json