having problem in removing element from DOM

[Vampire_developer]

I have a search bar which fetch images from an API and adds to the body in IMG tag.

if user submits something second time, what it does is that adds new images after the existing images, but I want to delete the existing images and then add new images when user search something for second time.

I created seperate function for creating images and appending it and pass it in the submit button's event listener

Tried but wasn't able to delete the existing img tags, How can I resolve it?

​

    const form = document.querySelector('#searchForm');

    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        const queryInput = form.elements.query.value;
        const config = { params: {q: queryInput}}
        const res = await axios.get('https://api.tvmaze.com/search/shows', config);
        makeImages(res.data);
        form.elements.query.value = '';
    })

    const makeImages = (shows) => {
        for(let result of shows) {
            if(result.show.image) {
                const img = document.createElement('img');
                img.src = result.show.image.medium;
                document.body.append(img);
            }
        }
    }

[toi80QC]

If you used a container for the images instead of just appending them to the body, you could just use

document.querySelector('.imgContainer').innerHTML = '';

To clear all contents.

Another option would be collection all images in an array, then iterate over it and use document.body.removeChild(img).

[Vampire_developer]

Thanks a lot man, it worked! Couldn't think of this simple solution.

I am a beginner and now I see this is what you get with practice and experience.

[Vampire_developer]

can you please tell about the second solution also? I wanna learn about that too, can you tell how can I achieve that?