Как очистить предыдущие результаты поиска после нового поиска?

Question

Я получил эту опцию поиска, где пользователь может искать по артистам через 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>';
        }

Теперь, если я ищу что-то новое, он просто добавляет больше строки под столом. Но я хочу заменить старый поиск новым поиском. Как мне это сделать?

Answer 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>';
    }