Javascript 从DOM中删除元素并将它们添加回原来的位置

我有一个模态窗口。我想要做的是在模式打开时从页面中删除某些元素，并在模式关闭后将它们添加回原来的位置。我不想显示：无，因为这只会隐藏它们，我需要将它们从页面中删除。所以我有一点jQuery要删除，并在一个计时器后重新添加它们，只是为了测试

更新：在代码中添加了这些内容后，它现在会先获取前面的元素，然后再将其添加到同一元素后面。问题是，如果该元素也被删除了怎么办？那它就不会再加进去了！另外，javascript事件处理程序在这种情况下不会丢失吗？我正在开发一个插件，因此它应该尽可能少地干扰网站，但Safari中的3d元素有一个无法绕过的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中指定一个特定的位置，以便它们返回。我想让元素回到原来的位置。如何确保元素不会更改/移动/丢失.remove上的信息到.append.

而不是删除元素，将其替换为占位符元素（使用

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]);
}

$3delements=$（'*'）.filter（function（）{return$（this.css（'-webkit transform style'）=='preserve-3d'}）；
var=[]；
$3delements.每个（函数（）{
//克隆原始元素，保留事件处理程序和所有子元素
originals.push（$（this.clone）（true））；
//为原始内容创建占位符
$（此）。替换为（“”）；
});
///
///做一些异步的事情
///
//用原始内容替换占位符
用于（var i原件）{
$（"原件"+（i+1））。替换为（原件[i]）；
}

---

有关更多信息，请参阅jQuery文档中的和

我创造了小提琴。让我知道这是否满足您的要求

使用

.detach（）

和

.append（）

删除并重新附加元素，它将维护所有事件和数据

如果按与删除图元相反的顺序重新添加图元，则这些图元应全部放回原位

---

未测试代码

---

---

在这种情况下指定“位置”。容器中元素的顺序重要吗？他们是深度可变还是兄弟姐妹？你知道我们可以锚定一个查询以便定位相对于它的位置吗？我对代码做了一些更改，看看他们是否回答了你的问题……虽然在jQuery中可以获得元素在DOM中的深度和位置，但我认为不可能获得元素在其同级中的确切位置。想想看：如果我们准备/追加/删除兄弟姐妹或更糟，取代内容一般，然后实际位置现在已经消失。请在你的答案中包括相关代码，而不是只是张贴链接！问a-1的好方法。谁知道小提琴在未来是否仍然在线？小提琴很适合演示代码，但回答问题的代码仍应包含在答案中。

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