Rimuovi elemento, ma conserva tutti i dati e gli eventi associati

Question

Ho un contenitore che può essere iniettato in qualsiasi contenitore specificato nella pagina (come un popup). Popup dovrebbe avere un pulsante che cancella l'elemento genitore. Ho provato a usare .remove() per eliminare l'elemento genitore, tuttavia, rimuove anche i popup e i suoi eventi. Voglio che rimuova il popup (ho ancora il riferimento), tuttavia, non voglio .remove per separare gli eventi.

Finora, ho ottenuto questo:

var popup = $('#popup'); 

$('body > div').on('click', function() { 
    popup.appendTo($(this)); 
}); 

popup.find('button').on('click', function() { 
    $(this).closest('div:not(#popup)').remove(); 
}); 

http://jsfiddle.net/volter9/0zms29g1/

In sostanza, c'è un modo per eliminare un elemento senza rimuovere i suoi dati o gli eventi?

Grazie per l'attenzione!

P.S .: Ho provato ad aggiungere e nascondere popup nel corpo, ma non è quello che mi serve.

Answer 1

È possibile utilizzare .detach()

Il metodo .detach() è lo stesso .remove(), eccetto che .detach() mantiene tutti i dati jQuery associati con gli elementi rimossi. Questo metodo è utile quando gli elementi rimossi devono essere reinseriti nel DOM in un secondo momento.

Inoltre è possibile aggiungere l'elemento di scollegamento al DOM utilizzando il valore di ritorno:

var div = $("div").detach(); 

$(div).appendTo("body");