Удалить динамически созданную вкладку JQuery UI

Question

У меня есть 7 вкладок jquery ui на странице jspx.Я динамически добавляю новую вкладку для отображения результатов поиска из формы поиска.Все идет нормально.Теперь, когда пользователь нажимает на любую из других вкладок, вновь созданная вкладка «Результаты поиска» должна быть удалена.Здесь начинается моя проблема.

                $('#tabs').tabs({
                    select : function(event, ui) { //bind click event to link                   
                        selectedIndex = ui.index;

                        if ((selectedIndex < 8) && ($('#tabs').tabs("length") > 8)) {
                            $('#tabs').tabs('remove',8);
                        }

                         //I have other stuff here for each of the original 7 tabs
                 });

Кажется, эту вкладку можно удалить только после повторной инициализации вкладок, например

$('#tabs').tabs('destroy').tabs();
$('#tabs').tabs('remove',8);

Но на моей странице есть сетка данных, которая динамически добавляется в системувкладок в зависимости от индекса вкладки, по которой щелкают.Если я уничтожу, а затем удаляю, моя сетка полностью исчезнет из всех остальных вкладок (удаленных из домена), что не , что я хочу.

Пожалуйста, помогите, спасибо.

Answer 1

Проблема в том, что вы пытаетесь удалить отображаемую в данный момент вкладку.Поскольку это событие срабатывает до того, как действительно произойдет изменение вкладки, вы по сути вытаскиваете коврик из-под себя.Из источника пользовательского интерфейса:

select: function( index ) {
    index = this._getIndex( index );
    if ( index == -1 ) {
        if ( this.options.collapsible && this.options.selected != -1 ) {
            index = this.options.selected;
        } else {
            return this;
        }
    }
    this.anchors.eq( index ).trigger( this.options.event + ".tabs" );//YOUR EVENT
    return this;
},

Если вы хотите удалить вкладку, вы должны быть осторожны, «когда» это происходит.Ваш код отлично работает, когда подключен к "show".

show: function(event, ui) { //bind click event to link                   
                selectedIndex = ui.index;

                if ((selectedIndex < 2) && ($('#tabs').tabs("length") > 2)) {
                    $('#tabs').tabs('remove',2);
                }
            }

jsfiddle

Answer 2

Почему ты их уничтожаешь? Удалить должно работать просто отлично. jsFiddle

$( "#tabs" ).tabs();
$("#remove").click(function(){
    $( "#tabs" ).tabs("remove",0);
})