javascript - How to quickly temporarly remove elements from DOM and return them on demand? -

I want to ask, how to deal with many elements on this page that have emerged like this:

< Pre> & lt; Div id = "tab1" & gt; ... hundreds & lt; Div & gt; 'S & lt; / Div & gt; & Lt; Div id = "tab2" & gt; ... hundreds & lt; Div & gt; 'S & lt; / Div & gt; Etc ...

On demand of those hundred devices is loaded using AJAX. The problem is that there are more tabs, which have a large number of elements in each domain which makes all the tasks slow and slower because more tabs are loaded with content.

Is there a simple way to remove elements from temporarily invisible tabs and return to demand, when some tabs are clicked to appear?

Of course I do not want to use $ ('# tab1 .content'). Hide (); Because this will only make the contents of this tab invisible, but the content will still be in DOM.

Thanks in advance for any help.

Edit : If I want to reuse already received (cached) content then any repeated AJAX to reopen one of the previously opened tabs No calls will be required.

Many solutions are what you are trying to do.

Omar's solution works, but it has some drawbacks - any affiliate event handler is lost. Deployed event handler can deal with the situation ...

Take another option, more pure JavaScript, to make a piece of a document and then move all the tabbed element back to the pieces. .

  var tab1 = document.getElementById ("Tab 1"); Var frag1 = document.createDocumentFragment (); While (tab.firstChild) {frag1.appendChild (tab.firstChild); } // At this point, all elements will be in `frag` - in reverse order // No issue - just reverse the loop to get everything back.  

Edit

  var tab1 = document.getElementById ("Tab 1"); While (frag1.firstChild) {tab1.appendChild (frag1.firstChild); }