How to dynamically delete a div and clear the memory so I could add a new div with the same ID but different content using jQuery?

I am using the Picasa Web Integrator (PWI) code, that allows me to present a picture gallery using a picasa account. Using a for开发者_运维技巧m the user writes a keyword and then a code creates a div and calls for the PWI.

It works perfectly, but I'm trying to add a "back" button in order to let the user select a different keyword without refreshing.

But the code doesn't seem to clear the memory and the result is the same as the first time.

Here is the code:

//The button that the user presses when he has written the keyword. 
    $("#boton2").click(function() { 
            //Creates a new div 
            $(".shop3").append("<div></div>"); 
            $('.shop3 > div').attr('id', 'container3'); 
            //gets the keyword and creates a variable called "competidor"
            competidor = $('#competidor_txt').val(); 
            //calls for the PWI code...
            $("#container3").pwi({ 
                    username: 'davidagnino', 
                    mode: 'keyword', 
                     ... 
                     //This part works perfectly.

//The "back" button that should delete the div called #container3 
   $('#back3').click(function() { 
            event.preventDefault(); 
            competidor=null; 
            delete competidor; 
            $("#container3").empty();     //should make my div empty 
            $("#container3").remove();    //deletes the div...
    });

I think the best approach here would be to change the Div's ID on the fly, and thus set it up as a whole new div each time.

I'd set up a counter variable (ideally static, but global if that's over your head):

var divCounter=0;
$("#container"+divCounter).pwi({/*...*/});

when it's time to destroy that, increment divCounter and generate a whole new div. Should get the job done!

Obviously, in all your event handlers you'd refer to it generically:

$("#container"+divCounter);

A quick note, removing something completely removes it from the DOM, thus emptying it in the same operation. It's also good jQuery practice to chain your functions together, like this:

$("#container3").append(/*whatever*/).attr(/*whatever*/);