How to remove a div before adding

Question

I use Freebase Search. I propose to associate a specific keyword with the getJson request. The problem is that I associate the getJson functions and the corresponding .append / .prepend functions with the input field in which there is a search. Now, if you want to clear (empty) my div containing the result of getJson functions, I cannot say anything.

Therefore, every time I do a search, the result of the div remains empty. If I am not trying to start an empty function and perform a second search, new information is added on top of the previous information.

My website is 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 code. I am running several getJson functions.

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

Answer 1

Many people have explained the mechanics of cleaning, which sounds like you already understand, so maybe the missing part is when it does this. You probably want to clean things up, since the very first thing to do in your Freebase Suggest is to select a callback before you release any of the requests to other services such as Spotify (i.e. Before the first $ .getJSON ()).

Not related to your question, but do not forget about the attribution requirement for a Freebase license (not currently available on your website).

EDIT: here is your empty code 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 an element and place the HTML as shown below.

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

then after applying the append jquery function on the same selector as below

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

Answer 3

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

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

Answer 4

Using jQuery, there can be many ways to empty an element of its content and add / add content.

One of them 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 change html and don’t worry about saving events, you can just pass your html through the .html( 'Your HTML' ); function .html( 'Your HTML' );

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