Add / Remove Tabs Dynamically in Bootstrap - Make created tab active

Question

Here is the snippet to dynamically add / remove bootstrap tabs. Everything works fine, but I would like newly created tab to be active and in focus rather than the tab used

Answer 1

Here is a solution:

See JSFiddle

1. The tab('show') is still being called when the "Add Contact" navlink is clicked. Even though the show tab function is called, no tab content is being displayed because it has no existing contents linked to it. What I did is to add a condition to stop activating that tab.

   $(".nav-tabs").on("click", "a", function (e) {
        e.preventDefault();
        if (!$(this).hasClass('add-contact')) {
            $(this).tab('show');
        }
   })
   

2. I also removed the data-toggle="tab" attribute to the "Add Contact" navlink. For some reason, it activates the "Add Contact" tab if it's there.

   + Add Contact
   

3. Upon adding a new tab, trigger the click of the new tab so that the tab('show') function will be called. (see 1)

   $('.add-contact').click(function (e) {
        e.preventDefault();
        var id = $(".nav-tabs").children().length; //think about it ;)
        var tabId = 'contact_' + id;
        $(this).closest('li').before('
   New Tab x
   ');
        $('.tab-content').append('
   Contact Form: New Contact ' + id + '
   ');
   
        // add this
        $('.nav-tabs li:nth-child(' + id + ') a').click();
   });