从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/