從DOM中刪除元素並將其添加回他們所在的位置

Question

我有一個模式窗口。我想要做的是在模式打開時從頁面中刪除某些元素，並在模式關閉後將它們添加回原來的位置。我不想顯示：無，因爲只隱藏它們，我需要它們實際上從頁面中刪除。所以我有一個jQuery刪除，並將其添加回來後，一個計時器只是爲了測試...

更新：隨着這些代碼的增加，它現在抓取元素之前，然後將其添加回相同的元素。問題是，如果該元素也被刪除，該怎麼辦？然後它不會重新加入！此外，不會在這個JavaScript事件處理程序丟失？我開發了一個插件，所以它應該儘可能少地干擾網站，但是3D元素在Safari中存在一個無法繞開的bug。

任何想法如何我可以暫時刪除3D元素，而不會干擾人們的網站太多？

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'}); 
$3delementsposition = $3delements.prev() 

//On modal open 
$3delements.remove(); 

//On modal close 
$3delementsposition.after($3delements); 

的問題是，這需要我在DOM他們回來在指定某一個地方，我想元素回來在原來的位置。我如何確保這些元素不會改變/移動/丟失.append上的.remove信息。

Answer 1

1. 使用.detach()和.append()刪除並重新安裝的元素，它會維護所有事件和數據。

2. 如果以相反的順序，您刪除它們添加元素回來，他們都應該到位回落

---

未經測試的代碼

---

var elems3d = $(...); 
var elemsRemoved = []; 

// removing 
elems3d.each(function(i,o) { 
    var elem = $(o); 
    elemsRemoved.push({ 
     loc: elem.prev(), 
     obj: elem.detach() 
    }); 
}); 

// adding back 
while (elemsRemoved.length) { 
    var elem = elemsRemoved.pop(); 
    elem.loc.after(elem.obj); 
} 

Answer 2

而不是刪除元素，用佔位符元素替換它們（使用replaceWith），然後在需要時用原始內容替換佔位符。像下面這樣：

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'}); 
var originals = []; 
$3delements.each(function() { 
    // Clone original, keeping event handlers and any children elements 
    originals.push($(this).clone(true)); 
    // Create placeholder for original content 
    $(this).replaceWith('<div id="original_' + originals.length + '"></div>'); 
}); 

/// 
/// Do something asynchronous 
/// 

// Replace placeholders with original content 
for (var i in originals) { 
$('#original_' + (i + 1)).replaceWith(originals[i]); 
} 

更多信息，請參見clone和replaceWith在jQuery的文檔。

Answer 3

我已經創建了小提琴。讓我知道這是否滿足您的要求。

http://jsfiddle.net/mNsfL/12/