每次点击按钮时显示新元素

如何解决每次点击按钮时显示新元素

我使用 api 和 fetch(URL) 方法将信息发布到 dom。例如，API 返回标题和海报。我还添加了一段对节目的描述。所以我有一个部分包含所有三个。 我做了 5 个节目，我将它设置为当我点击按钮时所有 5 个节目都出现在 dom 上，但我希望它一次只在 dom 中显示一个节目。 例如，我有 5 个节目，我希望第一次单击显示 Show #5，然后在下一次单击时删除 Show #5 并显示 Show #4。

我知道 forEach 方法可以解决问题，但我不确定如何实现。有什么指点吗？

这是我的示例代码。我有五个，但这里有两个

document.querySelector('.getShows').addEventListener('click',getShow)

async function getShow(){

    // This is for the number 1 show
    const res = await fetch("https://movie-database-imdb-alternative.p.rapidapi.com/?s=the%20wire&page=1&r=json",{
        "method": "GET","headers": {
            "x-rapidapi-key": "504","x-rapidapi-host": "movie-database-imdb-alternative.p.rapidapi.com"
        }
    })

    const data = await res.json();

    //// This is for the number 2 show////////////////////////////

    const res2 = await fetch("https://movie-database-imdb-alternative.p.rapidapi.com/?s=The%20sopranos&page=1&r=json","x-rapidapi-host": "movie-database-imdb-alternative.p.rapidapi.com"
        }
    })
    const data2 = await res2.json();

try{
        console.log(data.Search[0].Poster)
        let image1 = data.Search[0].Poster
        let title1 = data.Search[0].Title
        document.querySelector('.showTitle1').innerText = `1. ${title1}`
        document.getElementById('showImg1').style.visibility = 'visible'
        document.getElementById('showImg1').src = image1
        document.querySelector('.myDescription').style.visibility = 'visible'
        /////////////////////////////////////////////////
        //////Show 2/////////////////////////////////////
        let image2 = data2.Search[0].Poster
        let title2 = data2.Search[0].Title
        document.querySelector('.showTitle2').innerText = `2. ${title2}`
        document.getElementById('showImg2').style.visibility = 'visible'
        document.getElementById('showImg2').src = image2
        document.querySelector('.myDescription2').style.visibility = 'visible'

} catch(err){
        console.log(`err ${err}`)
    }

}