jqueryui dialog not hiding when destroy() is called

Question

I'm having a problem with the jqueryui dialog box showing the div elements even after the dialog box has been destroyed.

I'm using The latest jqueryui version 1.12.1 with the current version of jquery at 3.4.1

Here is how I initialize the dialog box:

$("#modal_confirm_yes_no").dialog({
            title: xtitle,
            bgiframe: true,
            autoOpen: false,
            height: xheight,
            width: xwidth,
            modal: true,
            resizable: false,
            stack: true, //Puts in front of other dialog's that may be open
            buttons: dialog_buttons,
            open: function(event, ui) {
              $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
            },
            close: function(event, ui) { $("#modal_confirm_yes_no").hide(); },
            destroy: function()
            {
                $("#modal_confirm_yes_no").hide();
            }
        });

$("#modal_confirm_yes_no").dialog("open");

Here is an example of the dialog displayed:

Screen shot of when the dialog is displayed

When the user presses the "NO" button, this is the code that is executed:

$(this).dialog('destroy');

What happens next is the dialog box itself goes away, but the contents stay visible. Here is a screen shot showing the elements still on the screen:

screen shot of dialog box contents still visible after destroy() was called

Is there a different way I should be hiding these elements?

If I call this line $("#modal_confirm_yes_no").hide(); after I destroy the dialog box, then it does work...however there are hundreds of lines of code that would need to be updated. I was hoping that when the dialog box is initialized I could put something in the close() or destroy() functions...but it's not working?

Any help will be appreciated. Thanks.