I dynamically added 2 tabs by calling the  addTab function:

3. $(function() {
4.     var tabTitle = $( "#tab_title" );
5.     var tabContent = $( "#tab_content" );
6.     var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";
7.     var tabCounter = 2; 
8.     var tabs = $( "#tabs" ).tabs();
9.    
10. function addTab(tabTitle, tabContent) {
11.       var label = tabTitle || "Tab " + tabCounter;
12.       var id = "tabs-" + tabCounter;
13.       var li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
14.       var tabContentHtml = tabContent || "Tab " + tabCounter + " content.";
15. 
    
16.       tabs.find( ".ui-tabs-nav" ).append( li );
17.       tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
18.       tabs.tabs( "refresh" );
19.       tabCounter++;
20.     }

How can i remove/close the dynamically added tabs? i tried the following approach, but it does not remove the tabs...

2. // Remove the panel
3. $( "#" + "tabs-2").remove();
4. // Refresh the tabs widget
5. tabs.tabs( "refresh" );
6. 
   
7. // Remove the panel
8. $( "#" + "tabs-3").remove();
9. // Refresh the tabs widget
10. tabs.tabs( "refresh" );