jQuery-ui dialog - hide buttons using jquery

Question

How do I remove/hide the "Ok" button dynamically using jquery?

$('#dialog-save').dialog({
            autoOpen: false,
            modal: false,
            draggable: true,
            width: 275,
            height: 175,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
        });

I was able to change the title using this code -

var saveDialog = $('#dialog-save');
saveDialog.dialog('option', 'title', 'Message');

Not sure how to remove the buttons. Thanks!

Answer 1

You can set the buttons option in the same way you are setting the title:

saveDialog.dialog("option", "buttons", {});

Pass in an empty object literal to remove all the buttons. That should be fine, since you appear to only have the one button. If you were to have others, just specify the ones you want to keep when you call the option method.

Answer 2

One commonly overlooked feature of the UI dialog is that you can set various other properties of the buttons, including 'class' and 'id'. These can be very useful if you need to manipulate the buttons after instantiation.

For example...

$('#dialog-save').dialog({
        autoOpen: false,
        modal: false,
        draggable: true,
        width: 275,
        height: 175,
        {
            id: 'okBtn',
            text: "Ok",
            click: function () {
                $(this).dialog("close");
            }
        }]
    });

// And then at some other point in the code...
$('#okBtn').remove();