bootstrap 關閉tabs

最近在作一個前端，須要點擊按鈕建立一個可關閉的標籤頁，沒有找到合適的，最後想到不如改造一下bootstrap省事。
var addTabs = function (obj) {
 id ="tab_"+ obj.id;

$(".active").removeClass("active");

//若是TAB不存在，建立一個新的TAB
 if (!$("#"+ id)[0]) {
//固定TAB中IFRAME高度
 mainHeight = $(document.body).height() - 95;
//建立新TAB的title
 title = '<li role="presentation"id="tab_' + id + '"><a href="#' + id + '"aria-controls="' + id + '"role="tab"data-toggle="tab">' + obj.title;
//是否容許關閉
 if (obj.close) {
 title += ' <i class="icon-cancel3"tabclose="' + id + '"></i>';
}
 title += '</a></li>';
//是否指定TAB內容
 if (obj.content) {
 content = '<div role="tabpanel"class="tab-pane"id="' + id + '">' + obj.content + '</div>';
 } else {//沒有內容，使用IFRAME打開連接
 content = '<div role="tabpanel"class="tab-pane"id="' + id + '"><iframe src="' + obj.url + '"width="100%"height="' + mainHeight +
 '"frameborder="no"border="0"marginwidth="0"marginheight="0"scrolling="yes"allowtransparency="yes"></iframe></div>';
}
//加入TABS
$(".nav-tabs").append(title);
$(".tab-content").append(content);
}

//激活TAB
 $("#tab_"+ id).addClass('active');
 $("#"+ id).addClass("active");
};

var closeTab = function (id) {
//若是關閉的是當前激活的TAB，激活他的前一個TAB
 if ($("li.active").attr('id') =="tab_"+ id) {
 $("#tab_"+ id).prev().addClass('active');
 $("#"+ id).prev().addClass('active');
}
//關閉TAB
 $("#tab_"+ id).remove();
 $("#"+ id).remove();
};

$(function () {
 mainHeight = $(document.body).height() - 45;
$('.main-left,.main-right').height(mainHeight);
 $("[addtabs]").click(function () {
 addTabs({id: $(this).attr("id"), title: $(this).attr('title'), close: true});
});

 $(".nav-tabs").on("click","[tabclose]", function (e) {
 id = $(this).attr("tabclose");
closeTab(id);
});
});

<button class="btn btn-default"id="mail"addtabs="mail"url="/admin/message"title="個人消息">
 <i class="icon-mail2"></i><span class="badge pbadge">42</span>
</button>