新搜索后如何清除以前的搜索结果？答案

【问题标题】：How to clear previous searched results after a new search?新搜索后如何清除以前的搜索结果？
【发布时间】：2020-07-24 06:17:12
【问题描述】：

我有这个搜索选项，用户可以通过Bandsintown API 搜索艺术家。它返回大量数组。

这是我的 HTML：

<form>
    <label for="country">Artist:</label>
    <input type="text" name="artiest" id="artiest" placeholder="Fill in Artist"/>
    <input type="button" class="zoekartiest" onclick="getAPIdata();" value="Search"  /> 
</form>
<article id= "land" ></article>

这是我的javascript：

var informationBox = document.getElementById('land');
    var info = response;
    //the var is to get the information out of the API
    for(var i=0; i< info.length; i++){
        var a = (info[i].datetime);
        var b = (info[i].venue.country);
        var c = (info[i].venue.city);
        var d = (info[i].venue.name);
        var e = (info[i].url);

        informationBox.innerHTML += '<table>  <tr> <td>'  + a.substr(0,10) 
            + '</td> <td>' + b 
            + '</td> <td>' + c 
            + '</td> <td>' + d
            +'</td> <td> <a href="' + e +'" target="_blank"> GET TICKETS </a></td> </tr> </table>';
        }

现在，如果我搜索新内容，它只会在表格下方添加更多行。但我想用新搜索替换旧搜索。我该怎么做？

【问题讨论】：

getElementById('land') 中的 land 元素在哪里，等等？请阅读stackoverflow.com/help/minimal-reproducible-example

标签： javascript arrays loops search

【解决方案1】：

在再次添加其他内容之前，您可以轻松地将其清空。只需按照指定添加以下一行：

var informationBox = document.getElementById('land');
informationBox.innerHTML = '';   // Add this line
        var info = response;

//the var is to get the information out of the API

        for(var i=0; i< info.length; i++){
        var a = (info[i].datetime);
        var b = (info[i].venue.country);
        var c = (info[i].venue.city);
        var d = (info[i].venue.name);
        var e = (info[i].url);


        informationBox.innerHTML += '<table>  <tr> <td>'  + a.substr(0,10) 
        + '</td> <td>' + b 
        + '</td> <td>' + c 
        + '</td> <td>' + d
        +'</td> <td> <a href="' + e +'" target="_blank"> GET TICKETS </a></td> </tr> </table>';
    }

【讨论】：