关闭时清除jquery对话框内容

当我单击页面中的链接时，我打开了一个jquery对话框（如果它还没有打开），并在其中添加了一个jquery ui选项卡。遵循

但是当我关闭jquery对话框并重新打开它时，前面打开的选项卡就会显示出来。当我关闭并重新打开对话框时，我希望jquery对话框中没有选项卡，这样我就可以在对话框中添加一个新选项卡

这是我的jquery文档ready中的代码：

<script type="text/javascript">
var tab_counter = 1;

$(document).ready(function() {
var $tabs_example_1 = $('#example_1').tabs();

$('#addUiTab').click(function(){
        var label = 'Tab'+tab_counter,
        content = '<span id="tab">This is a sample tab content</span>';

        $('body').append('<div id="tab_'+tab_counter+'">'+content+'</div>');
        $tabs_example_1.tabs('add','#tab_'+tab_counter,label);
        tab_counter++;

        return false;
    });
});
</script>

function open_dialog()
{
    if(($("#jdialog_box_content").dialog( "isOpen" ) === true) == false)
    {
        $('#jdialog_box_content').dialog({
        open: function(event, ui) {  },
        close: function(event, ui) {  },
        autoResize: false,
        width: 460,
        height: 230,
        closeOnEscape: false,
        title: 'Dialog1'
        });
    }

    $('#addUiTab').trigger("click");
}

<div id="jdialog_box_content" style="display:none;">    
    <div id="example_1" class="tabs">
        <ul>
            <li><a href="#tabs-1-2">Tab 1</a></li>
            <li><a href="#tabs-2-2">This is tab 2</a></li>
            <li><a href="#tabs-3-2">This is tab number 3</a></li>           
        </ul>
        <div id="tabs-1-2">Tab 1<br>Lorem ipsum dolor sit amet</div>
        <div id="tabs-2-2">This is tab 2<br>Lorem ipsum dolor sit amet</div>
        <div id="tabs-3-2">This is tab 3<br>Lorem ipsum dolor sit amet</div>
    </div>
</div>

最后，这是jquery对话框中用于jquery选项卡的html:

<script type="text/javascript">
var tab_counter = 1;

$(document).ready(function() {
var $tabs_example_1 = $('#example_1').tabs();

$('#addUiTab').click(function(){
        var label = 'Tab'+tab_counter,
        content = '<span id="tab">This is a sample tab content</span>';

        $('body').append('<div id="tab_'+tab_counter+'">'+content+'</div>');
        $tabs_example_1.tabs('add','#tab_'+tab_counter,label);
        tab_counter++;

        return false;
    });
});
</script>

function open_dialog()
{
    if(($("#jdialog_box_content").dialog( "isOpen" ) === true) == false)
    {
        $('#jdialog_box_content').dialog({
        open: function(event, ui) {  },
        close: function(event, ui) {  },
        autoResize: false,
        width: 460,
        height: 230,
        closeOnEscape: false,
        title: 'Dialog1'
        });
    }

    $('#addUiTab').trigger("click");
}

<div id="jdialog_box_content" style="display:none;">    
    <div id="example_1" class="tabs">
        <ul>
            <li><a href="#tabs-1-2">Tab 1</a></li>
            <li><a href="#tabs-2-2">This is tab 2</a></li>
            <li><a href="#tabs-3-2">This is tab number 3</a></li>           
        </ul>
        <div id="tabs-1-2">Tab 1<br>Lorem ipsum dolor sit amet</div>
        <div id="tabs-2-2">This is tab 2<br>Lorem ipsum dolor sit amet</div>
        <div id="tabs-3-2">This is tab 3<br>Lorem ipsum dolor sit amet</div>
    </div>
</div>

表1
Lorem ipsum dolor sit amet
这是表2
Lorem ipsum dolor sit amet
这是表3
Lorem ipsum dolor sit amet

我只是想知道，当jquery对话框重新打开时，如何删除其中的现有选项卡

---

注意：我正在按照for jquery ui选项卡进行操作。

在对话框声明中需要

关闭：函数（事件，ui）{$（“\jdialog\u box\u content”）.html（“”；}

。 如果您不需要空对话框，也不需要任何选项卡，您可以通过以下方式实现：

$('#jdialog_box_content').dialog({
        open: function(event, ui) {  },
        close: function(event, ui) {
            var $tabs = $('#example_1');
            var l = $tabs.tabs('length');
            while(l)
            {
               $tabs.tabs('remove', l-1);                       
               l = $tabs.tabs('length');
            }

        },
        autoResize: false,
        width: 460,
        height: 230,
        closeOnEscape: false,
        title: 'Dialog1'
        });

---

您需要在对话框声明中使用

close:function（event，ui）{$（“#jdialog_box_content”）.html（“”；}

。 如果您不需要空对话框，也不需要任何选项卡，您可以通过以下方式实现：

$('#jdialog_box_content').dialog({
        open: function(event, ui) {  },
        close: function(event, ui) {
            var $tabs = $('#example_1');
            var l = $tabs.tabs('length');
            while(l)
            {
               $tabs.tabs('remove', l-1);                       
               l = $tabs.tabs('length');
            }

        },
        autoResize: false,
        width: 460,
        height: 230,
        closeOnEscape: false,
        title: 'Dialog1'
        });

---

谢谢，我还可以在jquery对话框的close事件下使用for循环代码来关闭所有打开的选项卡：

close: function(event, ui) 
{ 
    for (var i = $('#example_1').tabs('length') - 1; i >= 0; i--) {
    $('#example_1').tabs('remove', i);                  
    }
}

---

谢谢，我还可以在jquery对话框的close事件下使用for循环代码来关闭所有打开的选项卡：

close: function(event, ui) 
{ 
    for (var i = $('#example_1').tabs('length') - 1; i >= 0; i--) {
    $('#example_1').tabs('remove', i);                  
    }
}

---

使用上面的选项，当我重新打开对话框时，里面没有选项卡。。。它只是空的。您好，这将起作用，但在设置html时，IE（版本9之前）存在已知错误。更好的方法是调用

$（“#jdialog_box_content”）.empty（）这将使DOM保持正确的最新状态，而不会破坏对话框中对DOM元素的任何引用，无论您正在运行哪个浏览器。我甚至尝试过：$（“#jdialog_box_content”）.empty（）；在对话框的关闭事件中。但是重新打开对话框时仍然是空的。@dskanth我认为这是您想要的？使用上面的选项，当我重新打开对话框时，对话框中没有选项卡。。。它只是空的。您好，这将起作用，但在设置html时，IE（版本9之前）存在已知错误。更好的方法是调用
$（“#jdialog_box_content”）.empty（）这将使DOM保持正确的最新状态，而不会破坏对话框中对DOM元素的任何引用，无论您正在运行哪个浏览器。我甚至尝试过：$（“#jdialog_box_content”）.empty（）；在对话框的关闭事件中。但是重新打开对话框时仍然是空的。@dskanth我以为这就是你想要的？