jquery append元素並保留參考以便稍後將其刪除

Question

什麼是將div附加到dom的正確方法，併爲以後操作dom保留一個句柄？並刪除它的情況下，該參考也會被刪除？如果不是我怎麼辦？

這是我提出的一個示例代碼，請讓我知道您的意見，以及是否有更好的方法來做到這一點。

請注意，我保持數組中的引用，因爲許多元素可以操縱元素。

var layovers=[]; 

function ajaxMe($e){ 
//do some ajax call 
var lay=layoverThis($e); 

layovers[lay].remove(); //does this remove added element from dom ? does it unset layouvers[lay] too ? 
} 

function layoverThis($e){ 
     var p=layover.push($('<div class="overlay" ><span><i class="fa fa-spinner fa-spin"/>loading</span></div>')) - 1; 
     $e.append(layover[p]); 
     return p; 
    } 

我能想到的最接近的例子就像是在windows操作系統中打開一個文件夾。

當您打開一個文件夾時：一個新的窗口打開到您的桌面，同時還有一個任務欄選項卡添加鏈接到附加到桌面的同一窗口，允許系統操縱窗口（關閉還原最小化等..），那麼我如何在javasript中做到這一點。

我的問題是如何使這種行爲的方式是靈活的，而不是哈克或內存浪費。

Answer 1

您可以使用psudoClass和索引 - 在您創建DOM中的元素時將該事件添加到刪除元素。或者有一個onclick是移除了一個附加父DIV ..

所以，你的代碼看起來像：

function layoverThis($e){ 
    var p=layover.push($('<div class="overlay" ><span><i class="fa fa-spinner fa- spin"/>loading</span> <span class="closeThis" onclick="$(this).parent().remove();" > Close </span></div>')) - 1; 
    $e.append(layover[p]); 
    return p; 
} 

讓我知道這對你的作品，我有一些其他的解決方案。

更新：

爲了便於對象可以進行選擇，我會用一個psudoClass ..

document.ready(function() { 
    addADiv($('#myParent')); 

    getArrayOfDivs().css('background-color', 'red'); 

    doAjax(lastClicked); 
}); 

function doAjax(ctrl) 
{ 

} 

var lastClicked = ""; 
$('.dynamicDivs').click(function() { 
    lastClicked = $(this); 
}); 

function getArrayOfDivs() { 
    return $('.dynamicDivs'); 
} 

function addADiv($where){ 
    var uniqueIdentifier = $('.dynamicDivs').count() + 1; 
    $where.append($('<div class="overlay dynamicDivs ' + uniqueIdentifier + ' " ><span><i class="fa fa-spinner fa-  spin"/>loading</span></div>')); 

}