<body>
<button id="b_add1">Add Tab</button>
<div id='myTab' style="display:block">
<ul><li><a href='#tabpg0'>tabpg-0</a></li>
</ul>
<div id="tabpg0">content</div>
</div>
</body>
</html>
<javascript>
l_tabpgIndex=0;
function addTab() {
l_tabpgIndex++;
var href='#tabpg'+l_tabpgIndex;
var title = 'Tabpg-'+l_tabpgIndex;
var $tabs = $('#myTab').tabs();
$tabs.append('<div id="tabpg'+l_tabpgIndex+'"></div>');
//In order to make the closeicon works easiler, I gave an Id to the element <li>, which is different to the example the jQuery's document given.
$('<li id="li-'+l_tabpgIndex+'"><span id="closeicon-'+l_tabpgIndex+'" class="ui-icon ui-icon-close" style="float:right; cursor: pointer;"></span><a href="'+href+'">'+title+'</a></li>').appendTo( "#myTab .ui-tabs-nav" );
$tabs.tabs( "refresh" );
var newSelected = $('#myTab >ul >li').size() - 1;
$tabs.tabs("option", "active", newSelected); //switch to the NEW tab-page which is just created.
init_closeIcon(l_tabpgIndex); //passing an argument that is able to point to the Id.
}
function init_closeIcon(value) {
$('#myTab ul li').on('click','#closeicon-'+value,function(){
removeTab(value);
});
}
function removeTab(value){
var $tabs = $('#myTab').tabs();
$('#li-'+value).remove(); //this removes the tab; which is different to the example you found on jQuery's document. http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method
var panelId = tab.attr( "aria-controls" );
$('#'+panelId ).remove(); //this remove the panel
$tabs.tabs( "refresh" );
}
$('#b_add1').click(function(){ addTab(); });
</javascript>
