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);
        }
    }
}