Difference Between .dialog(“close”) and .dialog(“destroy”)

Question

What is the difference between .dialog(\"close\") and .dialog(\"destroy\") in jquery-ui?

I have a script where the previous developer had used

Answer 1

Remember if you are using the dialog for forms input, that destroying it will NOT remove your input, so if you are validating with the :input pseudo selector, the elements you 'destroyed' will be validated. This is where .remove() comes in handy.

You can add a custom close event that destroys your dialog and removes any form inside it to prevent further validation of it.

$dialog = $("#your_dialog_id");
$dialog.dialog('option', {
    title: "title",
    close: function (event, ui) {
        $dialog.find("form").remove();
        $dialog.dialog('destroy');
    }
});

Answer 2

close leaves the dialog configured, but invisible, so you can reopen it again with .dialog('open').

destroy will completely deconfigure the dialog box. It'll remove all of the UI elements that were added to the DOM, and any related event handlers.

destroy will not remove the element that held the contents of the dialog box (i.e. the element that you call .dialog on)

Answer 3

From Docs:

destroy:

Removes the dialog functionality completely. This will return the element back to its pre-init state.

close:

Closes the dialog, which can re-opened when needed.