Question

如何将元素保存到变量，然后将其删除，但不丢失变量数据？

var elements = $('.element');
elements.remove();
elements.insertAfter('.insertAfterElement');

Answer 1

使用.detach()代替.remove()。

来自docs：

.detach（）方法与.remove（）相同，除了.detach（）保留与删除的元素关联的所有jQuery数据。当删除的元素稍后要重新插入DOM时，此方法很有用。

Answer 2

来自http://api.jquery.com/remove/：

除了元素本身，所有绑定事件和jQuery 删除与元素关联的数据。删除元素如果不删除数据和事件，请改用.detach()。

来自http://api.jquery.com/detach/：

.detach()方法与.remove()相同，除此之外 .detach()保留与删除的所有jQuery数据相关联元素。当删除元素时，此方法很有用稍后重新插入DOM。

但是，当然，如果您要立即将其重新插入到文档中，那么使用它是没有意义的。

＆＃13;

$('button').on('click', function() {
  $('.element').insertAfter('.insertAfterElement');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Wrapper <span class="element">Element</span></div>
<button>Click me</button>
<div class="insertAfterElement"></div>

＆＃13;

Answer 3

来自http://api.jquery.com/remove/：

要删除元素而不删除数据和事件，请改用.detach()。

所以你要使用

var elements = $('.element');
elements.detach();
// later:
elements.insertAfter('.insertAfterElement');

但是，如果您只想立即移动元素，则根本不需要从DOM中显式删除它们。只是将它们插入不同的位置将隐式地将它们从旧位置移除（而不是将它们克隆）。所以只需使用

$('.element').insertAfter('.insertAfterElement');

删除元素时不要丢失可变数据

3 个答案: