Removing A JQuery UI Tab

Question

I am attempting to use some (simple) code to remove a JQuery UI tab that I had created dynamically. Unfortunately, it's 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 "Object doesn't support this property or method". I'm sure that the tab index is correct.

Any help out there?

Answer 1

It was a DOM problem. The jsp fragment that was being loaded had the head and body tags in it. I didn't immediately catch it because the addTab() method immediately above it worked fine.

Answer 2

Glad you got it working.

One suggestion - instead of looping through the tabs, you can use the tabs API to figure out the selected index of the tab and remove it a lot easier.

Here's a fiddle I put together (using the jQueryUI demo tabs with some enhancements).

The key part is using the 'selected' option. I have a button that, when clicked, will alert the selected tab index...

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

I have a different button that, when clicked, will get the selected index and then use the 'remove' option to remove that tab. This way you don't have to match the href name...

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

Even though you solved your problem, I thought I'd share this. Hope it helps!!