Question

I have a simple app that searches the Google Books API and returns a list of public domain books. The user can then open the free book and read it.

The problem is, if you search more than once, it appends the next search results to the page.

Is there a way to have the results of the second search “replace” the first results?

fiddle: http://jsbin.com/welcome/52020

       <form name="inputForm"
                  onsubmit="beginSearch(this.query.value); return false;"
                  method="get">
                <input type="text" size="30" name="query" value="Romeo and Juliet" id="textfield"/>
                <input type="submit">
        </form>

        <div id="lister">
        </div>


//for list
function beginSearch(query) {

    var script = document.createElement("script");

    script.src = 'https://www.googleapis.com/books/v1/volumes?q='
            + encodeURIComponent(query) + '&filter=free-ebooks'
            + '&callback=handleResultsList';
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

//structure results
    function handleResultsList(response) {

    for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        var title = item.volumeInfo.title;
        var thumb = item.volumeInfo.imageLinks.thumbnail;
        link = item.accessInfo.webReaderLink + '&amp;output=embed'; // cache value
        var img = $("<img/>").attr("src", thumb);
        var booklink = "booklink";
        var bookframe = "bookframe";

            $("<a/>").attr({class: booklink, href: link, title: title}).append(img).appendTo("#lister");

    }

}

Answer 1

Since you’re using jQuery, its should be as easy as doing something like this:

    //structure results
    function handleResultsList(response) {

    $('#lister').find('a').remove(); // Remove all existing links before adding new

    for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        var title = item.volumeInfo.title;
        var thumb = item.volumeInfo.imageLinks.thumbnail;
        link = item.accessInfo.webReaderLink + '&amp;output=embed'; // cache value
        var img = $("<img/>").attr("src", thumb);
        var booklink = "booklink";
        var bookframe = "bookframe";

            $("<a/>").attr({class: booklink, href: link, title: title}).append(img).appendTo("#lister");

    }
}