Cannot able to remove tab from remove button ? Please help

Cannot able to remove tab from remove button ? Please help

<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-personalized.js"></script>
<script type="text/javascript">
//<![CDATA[
var dyna_tabs = {
    
    tabs: null,

    init: function (id) {
        var tabs = $('<div></div>').append('<div id="'+ id + '"></div>');
        $('body').append(tabs);

        var list = $('<ul></ul').append('<li><a href="#"></a></li>');
        tabs.append(list);

        tabs.tabs();

        // remove the dummy tab
        tabs.tabs('remove', 0);
        tabs.hide();

        this.tabs = tabs;
    },

    add: function (tab_id, tab_name, tab_content) {
        if (this.tabs != null) {
            if (this.tabs.css('display') == 'none') {
                this.tabs.show();
            }
            var data = $('<div id="'+tab_id+'"></div>').append(tab_content);
            this.tabs.append(data).tabs('add', '#' + tab_id, tab_name);
            this.tabs.tabs('select', '#' + tab_id);
        } else {
            alert('Tabs not initialized!');
        }
    }

};

$(function () {
    dyna_tabs.init('mytabs');

    var tab_counter = 1;

    $('#addtab').click(function () {
        dyna_tabs.add(
            'Tab' + tab_counter, 
            'Tab #' + tab_counter, 
            '<div><h2>Sample content '+tab_counter+'</h2><p><iframe align=\"middle\" frameborder=\"0\" height=\"300\" scrolling=\"no\" src=\"CountryBs.html?iddid=" . "\" width=\"100%\"></iframe></p></div>'
        );

        tab_counter += 1;
    });



});
$('#remove').('click', function() {
    var $tabs = $('#tabs').tabs();
    var selected = $tabs.tabs('option', 'selected');
    if(selected == -1)
        selected = $('p[id=remove]').index(this);
    $('#tabs').tabs("remove", [selected]);
});

//]]>
</script>
</body>
</html>