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

Remove Elements From The DOM And Add Them Back In Where They Were

本文关键字：添加 原来 位置 DOM 删除 元素      更新时间：2023-09-26

我有一个模态窗口。我想发生的是在模态打开时从页面中删除某些元素，并在模态关闭后将它们添加回原位。我不想做 display：none，因为这只会隐藏它们，我需要将它们实际从页面中删除。所以我有一些 jQuery 要删除并在计时器之后重新添加它们，仅用于测试......

更新：通过对代码的这些添加，它现在可以在前面抓取元素，然后在相同的元素之后重新添加它。问题是，如果该元素也被删除怎么办？然后它不会重新添加！另外，javascript 事件处理程序不会丢失吗？我正在开发一个插件，所以它应该尽可能少地干扰网站，但 3d 元素在 Safari 中有一个无法绕过的错误。

关于如何在不过多干扰人们网站的情况下暂时删除 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 上的信息。

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

不要删除元素，而是将它们替换为占位符元素（使用 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]);
}

有关详细信息，请参阅 jQuery 文档中的clone和replaceWith。

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

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

相关文章：