Here is something interesting about detach() vs remove() in jquery that happened to me.
As we know, remove() removed an element from the DOM wherease thedetach() does the same thing but it keeps all the jquery events bound to the element to which the method is applied to.
I have an application which allows users to upload and validate some files. The form sits in a popup which is triggered by a normal button on the page. When the popup is open users can upload a file (only one) using a input of type file and send it via ajax to the server when they submit the form.
The popup has a close button and when it is pressed the popup was detached using detach() from the DOM and the input field cleared. What happened was that every time I reopened the popup and upload a new file, somehow I ended up with more than one file, the one uploaded plus the other ones I uploaded before (one for each session), unless I ctrl + f5. Specifically, when I pressed the browse button, selected a file from the file system and pressed open, I would get the same file system window again, once, twice, three times, depending on home many times I had so far uploaded a file.
I replaced detach() with remove() and so not only I remove the popup from the DOM when the close button is pressed, but I also remove the associated jquery data from the form/poupup. The result? Everything works fine.
So, the question is, why detach() was misbehaving with file upload? It feels like somehow it stored the amount of times I clicked on the browse button and then representing me with those clicks if you like.

thanks, I knew detach() kept the data somehow as opposed to remove(), but in the thread there is a nice example which is in fact self explanatory and helpful and clearly shows how one keeps the jquery data and the other one discards it. That's good to know!

If this is solved, click the box?