The hide function sets the css block display to none.
The remove function clears the element from the current DOM session.
The detach function does the same thing as the remove function, but it retains the associated jQuery data.
Why do we need 'remove', if we can just hide the element?
Perhaps you really hate an html element and don't want to see that element again (during the current session) so you remove it, but you can still toggle on the other related elements ('li' elements in this example)...
Why do we need 'detach'?
Perhaps you need to append the element to someplace else at a later time and you want to retain it's associated jQuery functionality. The 'removed' element can still be appended, but it loses it's jQuery functionality, see:http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_detach_remove. This difference seems really marginal. I would just use 'detach' by default since it retains more functionality.
Clicking on an element in the first column below removes that element and hides all the other elements. The then shows you what's left in the DOM.
Clicking the second column above detaches that element. The black show button then appends the detached elements into a new location. You may notice that you can detach and re-append the elements at the new location.
Who wins? I don't know, go ask someone else.