ScriptUI - Removing elements from a dialog box

Hello,

I'm having a little problem with deleting an item from a dialog.
I can't figure it out and it seems very simple to me. I am asking for some solution..simple example below. Thank you in advance!

var dialog = new Window('dialog {orientation:"column", text:"Dialog"}'); 

var group1 = dialog.add('group {text:"group1", orientation:"row"}', undefined, {name: "group1"}); 
var button1 = group1.add('button {text:"deleteGroup2"}', undefined, undefined, {name: "button1"}); 

var group2 = dialog.add('group {text:"group2", orientation:"row"}', undefined, {name: "group2"}); 
var statictext1 = group2.add('statictext {text:"group1"}', undefined, undefined, {name: "statictext1"}); 
var button2 = group2.add('button {text:"button"}', undefined, undefined, {name: "button2"}); 

// toRemove
var group3 = dialog.add('group {text:"group3", orientation:"row"}', undefined, {name: "group3"}); 
var statictext2 = group3.add('statictext {text:"toRemove"}', undefined, undefined, {name: "statictext2"}); 
var button3 = group3.add('button {text:"button"}', undefined, undefined, {name: "button3"});
// toRemove

var group4 = dialog.add('group {text:"group4", orientation:"row"}', undefined, {name: "group4"}); 
var statictext3 = group4.add('statictext {text:"group3"}', undefined, undefined, {name: "statictext3"}); 
var button4 = group4.add('button {text:"button"}', undefined, undefined, {name: "button4"}); 

button1.onClick = function() {
    dialog.children[2].remove(); // doesn't work
    // alert(dialog.children[2].text); //it works
};

dialog.show();