在提交时重置div内容

Question

I have an isbn search input and a submit button. On form submit the results are displayed in a div below the form, works fine.

My issue is that I am able to repeatedly press submit and multiple divs appear one after another.

How can I replace the contents of the div each time submit is pressed?

My code so far;

$( "#form" ).submit(function() {

    var isbn = $('#isbn_search').val(); 
    var url='https://www.googleapis.com/books/v1/volumes?q=isbn:'+isbn;
    event.preventDefault();
    $.getJSON(url,function(data){
            $.each(data.items, function(entryIndex, entry){                   
                var html = '<div class="result">';   
                html += '<h3>' + ( entry.volumeInfo.title )+ '</h3>';  
                $(html).hide().appendTo("#result").fadeIn(1000);
            });
    });

});

<form id="form" method="post" action="">
    <label>ISBN: </label>
    <input type="text" id="isbn_search" name="isbn_search" />

    <input type="submit" value='Search Google Books' />
</form>

<div id="result"></div>

Answer 1

Just reset the #result's html before adding the new data. Such as this:

...
$.getJSON(url,function(data){
    $('#result').html('');
    $.each(data.items, function(entryIndex, entry){
...