Question

I am trying to add the remove buttons dynamically from a jQuery UI Dialog, however my remove function appears to be causing the below error:

Uncaught TypeError: Cannot read property 'length' of undefined
jquery-1.5.2.min.js:16

I am not really sure why, but if I comment out my use of the remove button function everything works ok. I have uploaded a basic copy: http://jsfiddle.net/fS253/6/ but dialog doesn’t appear to work within jsfiddle

// Allows simple button addition to a ui dialog
$.extend($.ui.dialog.prototype, {
    'addbutton': function (buttonName, func) {
        var buttons = this.element.dialog('option', 'buttons');
        buttons.push({text: buttonName, click: func});
        this.element.dialog('option', 'buttons', buttons);
    }
});

// Allows simple button removal from a ui dialog
$.extend($.ui.dialog.prototype, {
    'removebutton': function (buttonName) {
        var buttons = this.element.dialog('option', 'buttons');

        for (var i in buttons) {
          if(buttons[i].text==buttonName) {
            delete buttons[i];
          }
        }

        this.element.dialog('option', 'buttons', buttons);
    }
}); 

actionsForm.dialog('addbutton', 'New Button', newButtonClickFunction); 
actionsForm.dialog('removebutton', 'New Button');

function newButtonClickFunction() { 
    alert('You clicked the new button!'); 
} 

Answer 1

The problem is that delete buttons[i]; removes element but still keeps the array length same.

Simple solution would be to create a new array – http://jsfiddle.net/m3a7a/