How do I destroy all jQuery UI widgets?

Question

I have developed a large "single page application" using jQuery and jQuery UI. As I load various sections in the app it creates jQuery UI widgets like dialogs or date pickers. They tend to hang around and cause some issues when I reload certain sections. I would like the ability to call a function that destroys all jQuery UI widgets that have been loaded and remove them from the DOM. Any solution to catch all of them? Thanks!

Answer 1

In theory, it's easy enough to locate and destroy all widgets of a specific type on a page:

$(":ui-draggable").draggable("destroy");

So, it isn't unthinkable to create a loop around an array of widget types you know you're using, and delete every kind of widget on the list.

Answer 2

Use remove() or detach() to clear the contents of your jquery UI widgets and here is the difference

remove() removes the matched elements from the DOM completely.

detach() is like remove(), but keeps the stored data and events associated with the matched elements.