Removing jQuery UI Tab

Question

I am trying to use some (simple) code to remove a jQuery user interface tab that I created dynamically. Unfortunately, he is not cooperating.

Here is the javascript method I'm using:

    function removeTab(tabName) {

        var tabIndex = -1;
        $('#tabbedPanel > ul > li > a').each(
                function(i) {
                    if (this.href == tabName) {
                        tabIndex = i;
                    }
                });

        $('#tabbedPanel').tabs("remove", tabIndex);

    }

Unfortunately, all I get is "The object does not support this property or method." I am sure the tab index is correct.

Any help there?

Answer 1

Glad you earned it.

One suggestion is that instead of iterating over tabs, you can use the tabs API to figure out the selected tab index and remove it a lot easier.

fiddle ( jQueryUI ).

"selected". , ...

$("#get_index").click(function(e) {
    e.preventDefault();
    alert("Selected tab index = " + $("#tabs").tabs("option", "selected"));
});

, , "", . , href...

$("#remove_selected").click(function(e) {
    e.preventDefault();
    var selIndex = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("remove", selIndex);
});

, , . , !

Answer 2

DOM. jsp . , addTab() .