I have a simple API that gives you the cover images of shows after submitting a word in a form. I want to clear the search result after the images have been displayed so that the next batch of images show. Is there a way to do this in vanilla Javascript?
const form = document.querySelector('#searchForm');
const input = document.querySelector('#inp');
const btn = document.querySelector('#btn');
form.addEventListener('submit', async function(e)
{
e.preventDefault();
console.log(form.elements.query.value);
const response = await axios.get(`https://api.tvmaze.com/search/shows?q=${input.value}`);
makeImages(response.data);
input.value = '';
const secondResponse = await (btn.addEventListener('click'));
clearImages(response.data);
})
const makeImages = (shows) =>
{
for(let res of shows)
{
if(res.show.image){
const img = document.createElement('IMG');
img.setAttribute("id","imgAttr");
img.src = res.show.image.medium;
document.querySelector('.bd').append(img);
}
}
}
const clearImages = (shows)=>
{
for(let res of shows)
{
if(res.show.image)
{
let imgs = document.querySelector("#imgAttr");
imgs.parentNode.removeChild(imgs);
}
}
}