Как скрыть диалоговые кнопки при открытии диалогового окна jQuery-ui

Question

При открытии диалогового окна jQuery-UI, как я могу скрыть кнопку (например, скрыть кнопку «Сохранить»)?

http://jsfiddle.net/ba6jwh54/1/

<!-- head --> 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script> 

<!-- body --> 
<div id="dialog" class="dialog" title="My Title"></div> 
<a href="#" id="open">open</a> 

// javascript 
$(document).ready(function() { 
    $('#open').click(function() { 
     $("#dialog").dialog("open"); 
    }); 
    $("#dialog").dialog({ 
     autoOpen: false, 
     height: 400, 
     width: 350, 
     modal: true, 
     open: function() { 
      var dialog = $(this); 
      console.log('dialog', dialog); 
      var buttons = dialog.dialog("option", "buttons"); 
      console.log('buttons', buttons); 
      //Change names this way... 
      buttons[0].text = 'Save2'; 
      buttons[1].text = 'Cancel2'; 
      dialog.dialog("option", "buttons", buttons); 
      //How do I hide a button (i.e. hide Save button)? 
     }, 
     buttons: [{ 
      text: 'SAVE', 
      click: function() { 
       alert('save'); 
       $(this).dialog("close"); 
      } 
     }, { 
      text: 'CANCEL', 
      click: function() { 
       $(this).dialog("close"); 
      } 
     }] 
    }); 
}); 

Answer 1

Самый простой * способ это ухватить widget элемента текущего диалогового окна в и .find() кнопку внутри:

open: function() { 
    var $widget = $(this).dialog("widget"); 
    $widget.find(".ui-dialog-buttonpane button:first").hide(); 
} 

Updated Fiddle

^{Легче найти все элементы button на странице и угадать, какой из них.}

Answer 2

Я просто добавил идентификатор к кнопке, и уточнен функцию нажмите, чтобы скрыть его.

$(document).ready(function() { 

    $('#open').click(function() { 
     $("#dialog").dialog("open"); 
     $("#save").hide(); 
    }); 

    $("#dialog").dialog({ 
     autoOpen: false, 
     height: 400, 
     width: 350, 
     modal: true, 
     open: function() { 
      var dialog = $(this); 
      console.log('dialog', dialog); 
      var buttons = dialog.dialog("option", "buttons"); 
      console.log('buttons', buttons); 
      //Change names this way... 
      buttons[0].text = 'Save2'; 
      buttons[1].text = 'Cancel2'; 
      dialog.dialog("option", "buttons", buttons) 
      //How do I hide a button (i.e. hide Save button)? 
     }, 
     buttons: [{ 
      text: 'SAVE', 
      id: "save", 
      click: function() { 
       alert('save'); 
       $(this).dialog("close"); 
      } 
     }, { 
      text: 'CANCEL',    
      click: function() { 
       $(this).dialog("close"); 
      } 
     }] 
    }); 

}); 

http://jsfiddle.net/ba6jwh54/2/