如何动态删除 div 并清除内存，以便我可以使用 jQuery 添加具有相同 ID 但不同内容的新 div？

Question

我正在使用 Picasa Web Integrator (PWI) 代码，它允许我使用 picasa 帐户展示图片库。用户使用表单编写一个关键字，然后用代码创建一个 div 并调用 PWI。

它工作得很好，但我试图添加一个“后退”按钮，以便让用户选择不同的关键字而无需刷新。

但代码似乎没有清除内存，结果与第一次相同。

这是代码：

//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...
    });

Answer 1

我认为最好的方法是动态更改 Div 的 ID，从而每次将其设置为一个全新的 div。

我会设置一个计数器变量（理想情况下是静态的，但如果您无法理解，则为全局变量）：

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

当需要销毁该变量时，增加 divCounter 并生成一个全新的 div。应该完成任务！

显然，在所有事件处理程序中，您都会通用地引用它：

$("#container"+divCounter);

快速说明，删除某些内容会将其从 DOM 中完全删除，从而在同一操作中将其清空。将函数链接在一起也是很好的 jQuery 实践，如下所示：

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