jQuery: Difference between remove() and detach() methods

To check difference between remove() and detach() methods follow the steps below:

First click on remove() button it will remove the Yellow box with inside elements data and events.
Then click on attach() you can see the removed "Yellow Box" attached inside the "Red Box" with content.

Now remember when you click on the "Yellow Box" there was an alert message "Yellow content box" click on yellow box to get this message again, you will not get alert message because remove() method removed event handlers from the selected elements.
Now refresh page and click on detach() button it will remove "Yellow Box".
Then click on attach button "Yellow Box" will attach inside the "Red Box".

Now click on "Yellow Box" you will get alert message "Yellow content box"

Note: Don't forget to refresh page after you checked remove() method in this example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.