Empty jQuery UI Tabs

Question

How can I empty (remove all tabs) a jQuery UI Tabs?

EDIT: I'm not trying to remove the tab functionality, but to empty all tabs to add new ones.

I'm trying with:

for (var i = $('#content').tabs('length') - 1; i >= 0; i--) {
    $('#content').tabs('remove', i);
}

But tabs('length') always returns 0, even if there are some tabs added to the control.

BTW, I'm initializing it empty

$('#content').tabs();

and adding tabs dynamically afterwards

$('#content').tabs( 'add' , '' , data[i].nombre);

Answer 1

You should be able to just unbind the tabs from the selector.

$('#content').unbind();

EDIT:

Straight from jQuery Documentation

.tabs( 'destroy' );

Remove the tabs functionality completely. This will return the element back to its pre-init state.

Answer 2

Did you try adding tabs with non empty url?

$('#content').tabs( 'add' , 'non empty url' , data[i].nombre);

Copied from official documentation (http://docs.jquery.com/UI/Tabs#method-add)

.tabs( 'add' , url , label , [index] )

Add a new tab. The second argument is either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab. The third is the zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.