How to hide a button in a jQuery UI dialog box

Question

I am using the jQuery UI dialog box. The following code I use. Can someone please let me know how to hide the "Export" button after clicking

$( "#dialog-confirm1" ).dialog({ resizable: false, height:350, width:650, modal: false, autoOpen:false, buttons: { "Export": function() { exportCSV(2); }, Cancel: function() { $( this ).dialog( "close" ); } } }); 

Answer 1

You can use $('.ui-button:contains(Export)').hide() : (the following code hides the export button when you click on it)

 $( "#dialog-confirm1" ).dialog({ resizable: false, height:350, width:650, modal: false, autoOpen:false, buttons: { "Export": function() { exportCSV(2); $(event.target).hide(); }, Cancel: function() { $( this ).dialog( "close" ); } } }); 

Answer 2

The documentation for the buttons option states:

The callback context is an element of dialogue; if you need access to the button, it is available as the target of the event object.

Therefore, you can use event.target to refer to a button element:

 buttons: { "Export": function(event) { $(event.target).hide(); exportCSV(2); }, "Cancel": function() { $(this).dialog("close"); } } 

Answer 3

 buttons: [{ "Export": function() { exportCSV(2); }, click: $( this ).hide() }]