CODEWITHSUNDEEP
javascriptarraysloopssearch
jiuxi
jiuxi

Reputation: 33

How to clear previous searched results after a new search?

I got this search option, where the user can search on artists through Bandsintown API. It returns tons of arrays.

This is my 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>

This is my 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>';
        }

Now if I search for something new, it just adds more rows under the table. But I want to replace the old search with the new search. How do I do that?

Upvotes: 1

Views: 1522

Answers (1)

Jasdeep Singh
Jasdeep Singh

Reputation: 8321

You can easily do by it emptying it before adding another content again. Just add below one line as specified:

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

Upvotes: 2

Related Questions