Tengo dos botones MOSTRAR y OCULTAR. Cuando se hace clic en mostrar, aparecerán números (que son archivos json, cada archivo json contiene solo un número 1, 2, 3 ...) cuando se hace clic en OCULTAR, el primer número (json) en una fila desaparece. Por ejemplo, hicimos clic en el botón MOSTRAR 3 veces y obtuvimos esto: 1 2 3 y luego hicimos clic en OCULTAR una vez y luego obtuvimos: 2 3 mostrado. Mi problema es que cuando se hace clic en OCULTAR, quiero guardar ese número eliminado mostrándolo en mi div donde id="nome". Después de hacer clic en el botón OCULTAR, se muestra otro número oculto y el antiguo se elimina de div.
var pageCounter = 1; var pageCounterr = 1; var animalContainer = document.getElementById("animal-info"); var animalContainerr = document.getElementById("nome"); 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 = 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(); } }); <button id="btn">SHOW</button> <button id="btnn">HIDE</button> <h2>Numbers:</h2> <div id="animal-info"></div> <h2>Hidden number is:</h2> <div id="nome"></div>