CODEWITHSUNDEEP
jqueryjquery-uitabsjquery-tabs
Muhammad Usman
Muhammad Usman

Reputation: 10936

How to remove the tab without select it in jquery

I want to delete the tabs without selecting it. When I select a tab and delete it. It works fine.And without selecting it It does not works

HTML: 

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"   rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">  </script>
</head>
<body style="font-size:62.5%;">

<div id="tabs">
  <ul>
 </ul>
</div>
<input type='button' id='addTab' value='Add Tab'>
<input type='button' id='removeTab' value='RemoveTab'>
</body>
</html>

​JS:

$(document).ready(function() {
    $("#tabs").tabs({
        tabTemplate: "<li><a href='#{href}'>#{label}</a> <p title='close' id='removeTab' style='cursor:pointer;display:inline'>x</p></li>"
    });
});

$(function() {
    var index = 0;
    index++;

    $("#addTab").live('click', function() {
        index++;
        var title = 'Tab.....  ' + index;
        var url = '#fragment-' + index;
        addTab(url, title, index);
    });

    function addTab(url, title, index) {
        $('#tabs').tabs("add", url, title, [index]);
    }

    $('#removeTab').live('click', function() {
        var $tabs = $('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        alert(selected);
        $('#tabs').tabs("remove", [selected]);
    });
});​

JS Fiddle http://jsfiddle.net/andrewwhitaker/6VrwD/27/

Upvotes: 0

Views: 2900

Answers (3)

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

Here is a working example http://jsfiddle.net/k44Wk/ which deletes the clicked tab even if it's not selected.

Here's the modified part to make thing works:

$('#removeTab').live('click', function() {
    var $tabs = $('#tabs').tabs();
    var selected = $tabs.tabs('option', 'selected');
    if(selected == -1)
        selected = $('p[id=removeTab]').index(this);
    $('#tabs').tabs("remove", [selected]);
});

One thing, you should avoid using the same ID for multiple elements.

Upvotes: 1

R. Schaaphuizen
R. Schaaphuizen

Reputation: 263

You could grab the href attribute from the tab where you have clicked the 'x' icon, and use that to remove that tab. You can do it by doing the following:

var link = $('a', $(this).parent()).attr('href');
$('#tabs').tabs("remove", link);

The only thing is the remove button which have the same ID as the x icons (what you should prevent where you can) is now looking for the first a element in his parent (which is the in this case). The best is to remove the remove submit or make another function for clicking that one.

Upvotes: 1

bygrace
bygrace

Reputation: 5988

You could select the first tab after delete like this: http://jsfiddle.net/6VrwD/28/ Using the code that I added you could figure out more complex logic like selecting the next tab if one exists and such.

Upvotes: 1

Related Questions