Este bucle forEach crea elementos html (tarjetas) cuando el usuario hace clic en el botón, pero si el usuario vuelve a hacer clic en el botón, supuestamente todas las tarjetas deben eliminarse. En mi caso, cuando vuelvo a hacer clic en el botón, solo desaparece la primera tarjeta. Sé que algo tiene que ver con la identificación. Traté de hacer esto () pero no tengo idea de qué hacer a continuación para eliminar todas las tarjetas. gracias por la atención
function getFood(){ if (foodBtn.classList.contains("yes")){ fetch("http://localhost:1314/getByType/food") .then((resp => { return resp.json(); })) .then((resp) => { resp.forEach(elem => { div.innerHTML += `<div id="MyFood"> <div class="card" style="width: 18rem;"> <img src="${elem.image}" class="card-img-top" alt="..."> <div class="card-body"> <b>price: ${elem.price} $</b> <p class="card-text">description: ${elem.description}</p> <p class="card-text">amount: ${elem.amount}</p> </div> </div> </div>` }) }) foodBtn.classList.remove("yes"); foodBtn.classList.add("no"); }else { const q = document.getElementById('MyFood'); console.log(q); q.innerHTML = ""; foodBtn.classList.remove("no"); foodBtn.classList.add("yes"); } }Es posible que varios elementos HTML no compartan el mismo ID. Es por eso que cuando intentas seleccionar #MyFood solo obtienes uno. En cambio, puede cambiarlo a clases, que son como ID para múltiples elementos. En div.innerHTML += ... , cambie la primera parte de la cadena de <div id="MyFood" ... a <div class="MyFood" ... , luego, en su else , debe cambiar el selector a las clases:
const elements = [...document.getElementsByClassName("MyFood")]; // you can also do: [...document.querySelectorAll(".MyFood")] elements.forEach(el => el.remove()); // loop through array of elements and remove each one // ...Obtenga más información sobre el selector: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Sin duda es un problema de id . Si varios elementos HTML comparten la misma id , cuando llame a getElementById() solo se llamará al primer elemento con esa identificación. Para solucionar esto sin cambiar gran parte de su código, en lugar de usar id , puede intentar configurar class="MyFood" y luego llamar al método getElementsByClassName() .
Un enfoque diferente, si por alguna razón necesita que aparezca el elemento id="MyFood" en su código, es envolver todas sus tarjetas dentro de un div como este:
<div id="MyFood"> ...cards here </div>entonces el resto de su código funcionará sin cambiar nada.
Tienes razón. En html, las ID son únicas, por lo que es posible que usar la misma ID para varias instancias no funcione como se esperaba. La solución es agregar algo en la generación que cree identificaciones únicas como
resp.forEach((elem, index) => { div.innerHTML += `<div id="MyFood${index}"> <div class="card" style="width: 18rem;"> <img src="${elem.image}" class="card-img-top" alt="..."> <div class="card-body"> <b>price: ${elem.price} $</b> <p class="card-text">description: ${elem.description} </p> <p class="card-text">amount: ${elem.amount}</p> </div> </div> </div>` })o use una clase en lugar de una identificación (personalmente iría con esto)
resp.forEach(elem => { div.innerHTML += `<div class="MyFood"> <div class="card" style="width: 18rem;"> <img src="${elem.image}" class="card-img-top" alt="..."> <div class="card-body"> <b>price: ${elem.price} $</b> <p class="card-text">description: ${elem.description}</p> <p class="card-text">amount: ${elem.amount}</p> </div> </div> </div>` })Luego para seleccionar y eliminar solo llame
const q = document.querySelectorAll('.MyFood'); for (let i = 0; i < q; i++) { q[i].remove(); }