javascript - シンプルなブック検索アプリ: 2 回目の検索で検索結果を置き換えるには?

Question

Google Books API を検索し、パブリック ドメインの書籍のリストを返すシンプルなアプリがあります。その後、ユーザーは無料の本を開いて読むことができます。

問題は、複数回検索すると、次の検索結果がページに追加されることです。

2 番目の検索結果で最初の結果を「置き換える」方法はありますか?

フィドル: 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

jQuery を使用しているので、次のようなことを行うのと同じくらい簡単なはずです。

    //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");

    }
}

Answer 2

onsubmit をに変更します

$("#lister").html(""); beginSearch(this.query.value); return false;