Eliminar elementos del DOM y volver a agregarlos donde estaban

Question

Tengo una ventana modal. Lo que quiero que suceda es eliminar ciertos elementos de la página cuando se abre el modal y volver a agregarlos a la derecha donde estaban después de que se cierre el modal. No quiero mostrar: ninguno, porque eso solo los oculta, necesito que realmente se eliminen de la página. Así que tengo un poco de jQuery para eliminar y agregarlos de nuevo después de un temporizador solo para probar ...

ACTUALIZADO: Con estas adiciones al código, ahora toma el elemento antes, luego lo agrega de nuevo después ese mismo elemento. El problema es, ¿qué pasa si ese elemento también se eliminó? ¡Entonces no volverá a agregarse! Además, ¿no se perderán los controladores de eventos de javascript en esto? Estoy desarrollando un complemento, por lo que debería interferir con el sitio lo menos posible, pero los elementos 3D tienen un error en ellos con Safari que es imposible de manejar.

¿Alguna idea sobre cómo podría eliminar temporalmente los elementos 3d sin interferir demasiado en el sitio de las personas?

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

El problema es que esto requiere que especifique un lugar determinado en el DOM para que vuelvan. Me gustaría que los elementos que volver en donde estaban. ¿Cómo puedo asegurarme de que los elementos no cambien/muevan/pierdan información en .remove a .append?

Answer 1

1. Uso .detach() y .append() para eliminar y vuelva a conectar los elementos, que mantendrá todos sus eventos y datos.

2. Si agrega elementos en el orden inverso al que las eliminó, todos ellos deben caer de nuevo en su lugar

---

código no probado

---

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

En lugar de eliminar los elementos, reemplácelos con elementos de marcador de posición (usando replaceWith) y luego reemplace los marcadores de posición con el contenido original cuando sea necesario. Algo así como lo siguiente:

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

Ver clone y replaceWith en la documentación de jQuery para obtener más información.

Answer 3

He creado el violín. Avíseme si esto cumple con su requisito.

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