jqueryUI destroy dialog without removing original element?

Question

I'm using jQueryUI to create a dialog, I want the dialog object to be destroyed when it's removed.

So I did something like this:

thisDialog.dialog({
    autoOpen:   true,
    close: function(event, ui) {
        thisDialog.dialog("destroy");
    }
});

What I want to do is maintain the existence of the element that thisDialog is attached to, but simply destroy the jQueryUI .dialog() object that is attached to it, not change my DOM.

Sample: http://jsfiddle.net/ytWPV/1/

Update:
This may be a bug/issue with jQueryUI? If someone can show that, I'll accept that as an answer as well

Answer 1

I am not sure what you want to accomplish with "destroy" versus "close", but I will assume you have good reasons.

If you can successfully close your dialog (essentially setting the entire DIV that represents your dialog to the CSS equivalent of display:none) but want to go further and have the html more permanently removed from the DOM, I would add some logic to the close function that would use a selector (any selector will suffice) to find the top-most DIV for your dialog and then to manually set the .html() for that DIV to and empty string. That will basically wipe out the internal HTML and leave you with only your original that once acted as a dialog...