This forEach loop creates html elements (cards) when user click the button but if user click the button again all cards supposedly must be deleted. In my case when I click the button again only the first card is gone. I know that it smth has to do with id. I tried to do this () but I have no idea what to do next to delete all cards. thanks for attention
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");
}
}Multiple HTML elements may not share the same ID. That's why when you try to select #MyFood you're only getting one. Instead, you can change it to classes, which are sort of like IDs for multiple elements. In div.innerHTML += ..., change the first part of the string from <div id="MyFood" ... to <div class="MyFood" ..., then in your else you need to change the selector to classes:
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
// ...
Learn more about the selector: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
It is certainly an id issue. If multiple HTML elements share the same id, when you call getElementById() only the first element with that id will get called. To fix this without changing much of your code, you instead of using id you can try setting class="MyFood" then call getElementsByClassName() method.
A different approach, if for some reason you need the id="MyFood" element to appear in your code, is to wrap all your cards inside a div like this:
<div id="MyFood">
...cards here
</div>
then the rest of your code will work without changing anything.
You are indeed right. In html IDs are unique so using the same ID for multiple instances may not work as expected. The solution is either add something in the generation that would create unique IDs such as
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>`
})
or use a class instead of an ID (I would personally go with this)
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>`
})
Then to select and delete just call
const q = document.querySelectorAll('.MyFood');
for (let i = 0; i < q; i++) {
q[i].remove();
}