Entonces, quiero hacer dos botones, uno para mostrar datos json (animals-1.json,animals-2.json,animals-3.json, ... depende de pageCounter, que funciona bien) y el segundo botón para eliminar se mostró primero json en pantalla. Cada json tiene solo un número escrito, por ejemplo, animales-1.json muestra el número 1, animales-2.json muestra el número 2 y así sucesivamente ... así que cuando se hace clic en el primer botón MOSTRAR 3 veces, se mostrarán en la pantalla los números 1 2 3 y cuando hago clic en el segundo botón OCULTAR, quiero que el primer número desaparezca y muestre en la pantalla solo los números 2 3 (animales-2.json y animales-3.json). ¿Como hacer esto? Gracias :) 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); }La mejor manera es agregar el nombre de la clase en los elementos htmlString.
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(); } });