Hide vs Remove DOM elements [closed]

Question

Hide vs Remove

What is the best way to handle DOM elements, hide or delete?. assume that the environment can change several times. Elements can have click-callbacks or other event callback.

Hide

When hide what is best?. If clicking a button hide multiple items, you can hide one by one or you can also create css rules to do so.

Option 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/

The other option is to just hide the desired items (these may be few or many):

Option 2:

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

http://jsfiddle.net/JAmF9/

---

Remove

To modify the DOM you can also delete unwanted items and re-insert them later.

Option 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/

These are just small examples. Assuming a UI that contains a large number of elements. What do you think the best option?. Which has less memory leak and more performance?

There are some javascript frameworks like kendo-ui that removes elements. jQueryUI prefers to hide items, but the widget Tab sortable creates the tab temporarily dragged by the user.

Answer 1

It's kind of obvious you know

• Hide is the best when you want to re-show the elements.
• Remove is the best when you won't need to use the elements again.

When you hide elements and then re-show them those elements don't lose all their callback and data, specially when jQuery is in use.

When you remove unnecessary elements, you reduce the memory allocated for your page, though in most scenarios it won't be a significant change.