Скрыть и удалить элементы DOM

Скрыть и удалить

Каков наилучший способ обработки элементов DOM, скрыть или удалить?. предположим, что окружающая среда может несколько раз меняться. Элементы могут иметь обратные вызовы или другие обратные вызовы событий.

Скрыть

Когда скрыть, что лучше?. Если нажатие кнопки скрыть несколько элементов, вы можете скрывать один за другим, или вы также можете создать правила CSS для этого.

Вариант 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/

Другой вариант - просто скрыть нужные элементы (их может быть несколько или несколько):

Вариант 2:

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

http://jsfiddle.net/JAmF9/

---

Удалить

Чтобы изменить DOM, вы также можете удалить ненужные элементы и снова вставить их позже.

Вариант 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/

Это лишь небольшие примеры. Предположим, что пользовательский интерфейс содержит большое количество элементов. Как вы думаете, лучший вариант?. У кого меньше утечки памяти и более высокая производительность?

Есть несколько фреймворков javascript, таких как kendo-ui, которые удаляют элементы. jQueryUI предпочитает скрывать элементы, но виджет Tab sortable создает вкладку, временно перетаскиваемую пользователем.