点击搜索按钮时如何清除之前的搜索结果？（HTML&JS）

要实现每次搜索时清除旧结果，只需要在渲染新数据之前清空结果容器的内容即可。具体修改如下：

在JavaScript的movie_search函数中，进入fetch的.then(data => { ... })回调后，先清空.games容器的HTML内容，再循环渲染新结果：

function movie_search()
{
var game_name = document.getElementById('game_name').value;
var raw = "search \""+game_name+"\";\r\nfields cover.url, name, url, screenshots.*; \r\n";

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://cors-anywhere.herokuapp.com/https://api.igdb.com/v4/games", requestOptions)
  .then(response => response.json())
  .then(data => {
    // 先清空旧结果
    document.querySelector('.games').innerHTML = '';
    data.forEach(gayme => {
        html += "<div class = 'gayme'>"
        let keys = Object.keys(gayme);
        keys.forEach((key) => {
        html += gayme[key]
        })
        html += "</div>"
        const game = `<ul><li><img src = "https:${gayme.cover.url}"><br><h4>Name:</h4><h3>${gayme.name}</h3><br><a href = "${gayme.url}">Click for Game Info</a><br><br></li></ul>`; 
        document.querySelector('.games').innerHTML += game; 
    })
  })
  .catch(error => console.log('error', error));
}
document.querySelector(".search").addEventListener("keyup",function(event){
  if(event.key == "Enter") {
      movie_search ();
  }
})

修改说明 #

• 添加了document.querySelector('.games').innerHTML = '';这一行，在处理新数据前清空容器，确保每次搜索只显示当前结果。
• 保持原有渲染逻辑不变，只是将追加改为先清空再添加。

内容的提问来源于stack exchange，提问作者rahulpandharkar