Ocultar vs Eliminar elementos DOM

Ocultar vs Eliminar

¿Cuál es la mejor forma de manejar elementos DOM, ocultar o eliminar? supongamos que el entorno puede cambiar varias veces. Los elementos pueden tener devoluciones de llamada por clic u otra callback por evento.

Esconder

¿Cuándo ocultar lo mejor? Si onclick en un button se ocultan varios elementos, puede ocultar uno por uno o también puede crear reglas 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 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 volver a insertlos 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 una gran cantidad de elementos. ¿Cuál crees que es la mejor opción? ¿Qué tiene less pérdida de memory y más performance?

Hay algunos frameworks de JavaScript como kendo-ui que eliminan elementos. jQueryUI prefiere ocultar elementos, pero el widget Tab que se puede orderar crea la pestaña temporalmente arrastrada por el usuario.

Es obvio que sabes

  • Hide es el mejor cuando quieres volver a mostrar los elementos.
  • Eliminar es lo mejor cuando no necesitará usar los elementos nuevamente.

Cuando oculta elementos y luego los vuelve a mostrar, esos elementos no pierden toda su callback y sus datos, especialmente cuando jQuery está en uso.

Cuando elimina elementos innecesarios, networkinguce la memory asignada para su página, aunque en la mayoría de los escenarios no será un cambio significativo.