jQuery Bootstrap Dynamic Tabs (Add & Remove)

Question

I have my code which enables the user to add and remove tabs in Bootstrap UI Tabs. I've successfully made it, and yes, it works well.

The only problem is it doesn't sort the tab name. For example, there are tabs like this: Tab 1, Tab 2, Tab 3, Tab 4, Tab 5

So when I remove Tab 2, Tab 3 will be Tab 2 then Tab 4 will be Tab 3and so on..

Also, when I remove a tab, an active tab shows Tab 1. (Please see it in jsfiddle)

Any fix with my two problems?

JSFiddle Link: https://jsfiddle.net/cnycmLq0/

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>
                <button id="btn-add-tab" type="button" class="btn btn-primary pull-right">Add Tab</button>
            </p>
            <!-- Nav tabs -->
            <ul id="tab-list" class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
            </ul>

            <!-- Tab panes -->
            <div id="tab-content" class="tab-content">
                <div class="tab-pane fade in active" id="tab1">Tab 1 content</div>
            </div>
        </div>
    </div>
</div>

JS:

    $(document).ready(function() {
        var tabID = 1;
        $('#btn-add-tab').click(function() {
            tabID++;
            $('#tab-list').append($('<li><a href="#tab' + tabID + '" role="tab" data-toggle="tab">Tab ' + tabID + '<button class="close" type="button" title="Remove this page">×</button></a></li>'));
            $('#tab-content').append($('<div class="tab-pane fade" id="tab' + tabID + '">Tab ' + tabID + ' content</div>'));
        });
        $('#tab-list').on('click', '.close', function() {
            var tabID = $(this).parents('a').attr('href');
            $(this).parents('li').remove();
            $(tabID).remove();

            //display first tab
            var tabFirst = $('#tab-list a:first');
            tabFirst.tab('show');
        });

        var list = document.getElementById("tab-list");
    });

Guruprasad J Rao · Accepted Answer · 2016-06-14 13:16:10Z

3

I have just written a function to reset your tabs and change its text. The main part is to store the button html in a var and make both button html and tabID as global variables. You can call this function on remove event.

var button='<button class="close" type="button" title="Remove this page">×</button>';
var tabID = 1;
function resetTab(){
    var tabs=$("#tab-list li:not(:first)");//get all tabs except first tab
    var len=1;//we do not want to reset 1st tab
    $(tabs).each(function(k,v){
        len++;//increment it
        $(this).find('a').html('Tab ' + len + button); //replace each tabs html with latest index and button html.
    })
    tabID--;//decrement tabs count
}

`Complete solution in Fiddle`

answered Jun 14, 2016 at 13:16

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jacob Over a year ago

Thank you for that! It works. But when I saw something wrong on your code. For example, I add 3 tabs. Then I removed Tab 2, so Tab 3 will be Tab 2. But when Tab 2 (old Tab 3) is active, it shows the content of Tab 3. Also, how can I go to the previous tab when tab is removed rather than going to the first tab?

Guruprasad J Rao Over a year ago

That's valid I guess.. because if you are removing tab2 you actually don't need the contents too.. So tab3 will be basically the actual tab in place of tab2 and its content holds valid...

Jacob Over a year ago

Take a look at this: jsfiddle.net/cnycmLq0/4 I've updated it, fixed the content. But then when I removed the last tab, it doesn't show it's content. Can you help me please?

Guruprasad J Rao Over a year ago

Because, there are duplicate ids for tab.. Give me some hours.. I'll come back and fix it..

Guruprasad J Rao Over a year ago

@Jacob.. I still have a doubt... Would you mind explaining??

Collectives™ on Stack Overflow

jQuery Bootstrap Dynamic Tabs (Add & Remove)

1 Answer 1

`Complete solution in Fiddle`

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related