Here is something interesting about
remove() in jquery that happened to me.
As we know,
remove() removed an element from the DOM wherease the
detach() 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.
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.