JQuery Dialog - диалоговые поля добавлены несколько раз в DOM

Я использую пользовательский интерфейс JQuery для отображения вкладок. На одной из вкладок у меня есть диалоговое окно. Если я перейду к этой вкладке, откройте диалоговое окно, закройте его, откройте вкладку и вернитесь назад и откройте диалоговое окно, в результате я получаю несколько и повторяющихся элементов HTML в DOM.

Другими словами...

У меня есть моя основная страница с вкладками:

<div id="groupTabs" style="width:600px; height:600px; display:none">
    <ul>
       <li><a href="tab1.aspx"><span>Info</span></a></li>
       <li><a href="tab2.aspx"><span>Associations</span></a></li>
    </ul>
</div>

Вкладка # 2 содержит диалоговое окно:

<div id="dgEvent">
    <input id="someId">
</div>

...

$("#dgEvent").dialog();

Я обнаружил, что если я открою диалог, отплыв (на другую вкладку) и обратно, то в следующий раз, когда я открою диалоговое окно, в итоге я получу повторяющиеся элементы с именем "someId" в моей DOM. Это вызывает проблемы, потому что когда я пытаюсь захватить значение из someID (например, $( "# someID" ). Val(), я получаю значение из первого экземпляра диалога.)

Есть ли исправление, чтобы убедиться, что поля удалены, когда диалог закрыт? Или еще лучше, что они правильно удаляются при переходе на другую вкладку?

ИЗМЕНИТЬ

В конце концов, я считаю, что проблема связана с использованием вкладок и диалога вместе. Любое поле, которое у меня есть на форме, которая находится за пределами диалогового окна, удаляется из DOM, когда я перемещаюсь с вкладки. Тем не менее, все, что было в диалоговом окне, остается в DOM после моего перехода. Таким образом, когда я перемещаюсь назад, я получаю дубликаты.

Ответы

$('#your-dialog').dialog('destroy').remove();

$("#dgEvent").dialog({ autoOpen: false });
$("#dgEvent").dialog('open');
$("#dgEvent").dialog('close');

$("#dgEvent").remove();