Ocultar vs Eliminar

¿Cuál es la mejor manera de manejar los elementos DOM, ocultar o eliminar? Supongamos que el entorno puede cambiar varias veces. Los elementos pueden tener click-callbacks u otro callback de evento.

Esconder

Cuando esconder lo que es mejor ?. Si hace clic en un botón para ocultar varios elementos, puede ocultar uno por uno o también puede crear reglas de css para hacerlo.

Opción 1:

<style>
.superContent{/*...*/}

.superContent.noEdit .occultable{
    display:none;
}
</style>

<form class=”superContent” action=”...”>
    <label>Name</label>
    <input type=”text” />
    <input type=”submit” class=”occultable” value=”send”/>
</form>

<button id=”hideAll”>Edit</button>
<script type=”text/javascript”>
    $(“#hideAll”).click(function(){
        $(“.superContent”).toggleClass(“noEdit”);
    });
</script>

http://jsfiddle.net/p8mU8/

La otra opción es simplemente ocultar los elementos deseados (pueden ser pocos o muchos):

Opcion 2:

<script type=”text/javascript”>
    $(“#hideAll”).click(function(){
        $(“.occultable”).toggle();
    });
</script>

http://jsfiddle.net/JAmF9/

retirar

Para modificar el DOM, también puede eliminar elementos no deseados y reinsertarlos más tarde.

Opción 3:

<form class="superContent">
    <label>Name</label>
    <input type="text" />
    <input id="sendbutton" type="submit" class="occultable" value="send"/>
</form>

<button id="hideAll">Edit</button>​

<script type=”text/javascript”>
$("#hideAll").click(function(){
    if( $(".superContent").find("#sendbutton").length>0 ){
        $(".superContent").find("#sendbutton").remove();
    }
    else{
        $(".superContent").append('<input id="sendbutton" type="submit" class="occultable" value="send"/>');
    }
});​
</script>

http://jsfiddle.net/Yj5Aw/

Estos son solo pequeños ejemplos. Suponiendo una interfaz de usuario que contiene un gran número de elementos. ¿Cuál crees que es la mejor opción? ¿Cuál tiene menos pérdida de memoria y más rendimiento?

Hay algunos marcos de javascript como kendo-ui que eliminan elementos. jQueryUI prefiere ocultar elementos, pero la pestaña clasificable del widget crea la pestaña arrastrada temporalmente por el usuario.