Rimuovere elementi dal DOM e aggiungerli nuovamente nel punto in cui erano

Question

Ho una finestra modale. Quello che voglio succedere è rimuovere alcuni elementi dalla pagina quando la modale si apre e li aggiungi di nuovo nel punto in cui si trovavano dopo la chiusura della modal. Non voglio mostrare: nessuno, perché solo li nasconde, ho bisogno che vengano effettivamente rimossi dalla pagina. Quindi ho un po 'di jQuery da rimuovere e li aggiungo dopo un timer solo per il test ...

AGGIORNATO: Con queste aggiunte al codice, ora afferra l'elemento prima, quindi lo aggiunge di nuovo dopo quello stesso elemento. Il problema è, cosa succede se quell'elemento è stato rimosso? Quindi non aggiungerà di nuovo in! Inoltre, i gestori di eventi javascript non andranno persi in questo? Sto sviluppando un plugin, quindi dovrebbe interferire con il sito il meno possibile, ma gli elementi 3d hanno un bug in loro con Safari che è impossibile andare in giro.

Qualche idea su come rimuovere temporaneamente elementi 3d senza interferire troppo con il sito delle persone?

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

Il problema è che questo richiede a specificare un certo posto nel DOM per loro di tornare. Mi piacerebbe gli elementi di tornare a dove si trovavano. Come posso assicurarmi che gli elementi non cambino/spostino/perdano informazioni su .remove su .append.

Answer 1

1. Usa .detach() e .append() da rimuovere e ricollegare gli elementi, manterrà tutti i tuoi eventi e dati.

2. Se si aggiungono elementi di nuovo in ordine inverso che li è stato rimosso, dovrebbero tutte ricadere in luogo

---

codice non testato

---

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

Answer 2

Invece di rimuovere gli elementi, sostituirli con elementi segnaposto (utilizzando replaceWith), quindi sostituire i segnaposti con il contenuto originale quando necessario. Qualcosa di simile a quanto segue:

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

Vedi clone e replaceWith nella documentazione jQuery per maggiori informazioni.

Answer 3

Ho creato il violino. Fammi sapere se questo soddisfa il tuo requisito.

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