How to empty div before append

Question

I'm using Freebase Search Suggest to bind a certain keyword to a getJson request. The problem is that I bind getJson functions and the corresponding .append/.prepend functions to to the input field that has the search suggest. Now if want to clear(.empty) my div that contains the result from the getJson functions i end up not being able to appennd anything.

So every time I do a search the result div stays empty. If I not try to run the empty function and do a second search, the new information gets appended on top of the previous information.

My site www.karsten-tietje.dk/sw

$('#myinput').suggest({key: "<mykey>","filter": "(all type:/music/musical_group )"

        })
        .bind("fb-select", function(e, data) {

$.getJSON("http://ws.spotify.com/search/1/track.json?q="+search_val, function(data) {
  items = [];

        $.each(data["tracks"], function(key, val) {
        items.push('<li class="spot"><span typeof="MusicRecording" property="track"><p>Name: <strong><span property="name">' + val["name"] + '</span></span></strong></p> <p>Album <strong>' + val.album["name"] + '</strong></p><p> Released: <strong>' + val.album["released"] +'</strong></p><p><strong><a href="' + val["href"] +'"><i class="icon-play-sign"></i> Start Spotify</a></strong></p>');
            if ( key === 7 ) 
            {
            return false;
            }
        });

        $('#spotify-div').prepend('<h3 style="border-bottom:1px solid white;">Spotify tracks</h3>');
        $('#spotify').html(items.join('</li>'));
    });
});

This is just a snippet of my some of my code. I run multiple getJson functions.

How can I clear/empty my result div before running the other functions?

Answer 1

Lots of people have explained the mechanics of clearing, which it sounds like you already understand, so perhaps the missing piece is when to do it. You probably want to clear things as the very first thing in your Freebase Suggest select callback, before you fire off any of the queries to other services like Spotify (i.e. before the first $.getJSON()).

Not related to your question, but don't forget the attribution requirement of the Freebase license (not currently provided on your web site).

EDIT: Here's your code with empty added:

$('#myinput').suggest({key: "<mykey>","filter": "(all type:/music/musical_group )"

        })
.bind("fb-select", function(e, data) {
    $('#spotify-div').empty(); // empty the div before fetching and adding new data
    $.getJSON("http://ws.spotify.com/search/1/track.json?q="+search_val, function(data) {
        items = [];
        $.each(data["tracks"], function(key, val) {
            items.push('<li class="spot"><span typeof="MusicRecording" property="track"><p>Name: <strong><span property="name">' + val["name"] + '</span></span></strong></p> <p>Album <strong>' + val.album["name"] + '</strong></p><p> Released: <strong>' + val.album["released"] +'</strong></p><p><strong><a href="' + val["href"] +'"><i class="icon-play-sign"></i> Start Spotify</a></strong></p>');
            if ( key === 7 ) 
            {
            return false;
            }
        });

        $('#spotify-div').prepend('<h3 style="border-bottom:1px solid white;">Spotify tracks</h3>');
        $('#spotify').html(items.join('</li>'));
    });
});

Answer 2

Select the element and put HTML blank like below

jQuery('#selector').html('');

then after apply the append jquery function on same selector like below

jQuery('#selector').append("<p>text</p>");

Answer 3

You can also do this by clearing the inner html of the html, with id "spotify":

$('#spotify').empty();

Answer 4

With jQuery there can be many ways of emptying an element of its contents and appending/prepending content.

One is .empty(); ( Documentation )

$('#spotify-div').empty().prepend('<h3>YourHTML Here</h3>');

Another is .html( [ html ] ); ( Documentation )

$('#spotify-div').html('').prepend('<h3>YourHTML Here</h3>');

If you are changing the html and not worried about keeping events, you could just pass your html through the .html( 'Your HTML' ); function

$('#spotify-div').html('<h3>YourHTML Here</h3>');