score:7

Accepted answer

If you just want to hide/show an object from time to time, then use jQuery .hide() and .show(). It's simplest and as long as you were going to keep the object around anyway, you may as well just use .hide() and .show(). Unless the object consumes massive amounts of memory, it shouldn't be an issue.

.remove() (while saving and then reinserting the same object back in the DOM later) will be of little use to you because it destroys some of the data associated with the object so you may not be be able to easily reinsert it in the page.

.remove() where you actually let the previous object gets destroyed by the garbage collector and then you recreate it from scratch when needed again is the most memory efficient operation, but unless it consumes a lot of memory or you have a lot of them (e.g. thousands), it's probably just more work to do it this way without any meaningful benefit.

.detach() (while saving and then reinserting the same object back in the DOM later) will work, but it's more work than .hide() and .show() and, in all honesty, I rather doubt you will find a difference between the two options.

score:7

the 3 will trigger a render and redraw, hence, if performance is your concern, go for .hide(), as it will "spare" some dom manipulation (and potentially 2 redraw). Don't forget about listeners on your chart too.

However, i found that forperformance .addClass('hidden') and .removeClass('hidden'), with a css rule (.hidden {display: none}) works best. (as long as you are not hidding on scrolling).


Related Query

More Query from same tag