刪除元素時不要丟失可變數據

Question

如何將元素保存到變量中，然後將其刪除，但不會丟失變量數據？

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

Answer 1

使用.detach()而不是.remove()。

從文檔：

的.detach（）方法是一樣的一個.remove（），不同之處在於.detach（）保持與移除的元件相關聯的所有的jQuery的數據。此方法在以後將被移除的元素重新插入DOM時非常有用。

Answer 2

從http://api.jquery.com/remove/：

除了元素本身，所有結合的事件和與該元件相關聯的jQuery 數據被除去。要刪除元素 而不刪除數據和事件，請改爲使用.detach()。

從http://api.jquery.com/detach/：

.detach()的方法是相同的.remove()，不同之處在於 .detach()保持與除去 元件相關聯的所有的jQuery的數據。如果刪除的元素將在稍後重新插入到DOM中，此方法非常有用。

但是，當然，如果您要立即將其插回到文檔中，則沒有意義使用該文檔。

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

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

Answer 3

從http://api.jquery.com/remove/：

要刪除的要素而不除去的數據和事件，使用.detach()代替。

所以，你會使用

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

不過，如果你只想立刻四處移動元素，你並不需要從DOM明確刪除它們。只要將它們插入不同的位置，就會隱式地將它們從舊位置移除（而不是將它們克隆）。所以簡單地使用

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