bootstrap中tab页动态增加和关闭

html如下：

<button onclick="add_tab()">add</button> 
<div id="editor_div" style="background: var(--bs-gray-900);">
                <ul class="nav nav-tabs focus-ring" role="tablist" id="editor_header" style="background: var(--bs-gray-dark);"></ul>
                <div class="tab-content" id="editor_content"></div>
            </div>

javascript如下：

function add_tab(result, fileName) {

    var tabsElement = $('#editor_div');
    var tabsUlElement = tabsElement.find('ul');

    // the panel id is a timestamp plus a random number from 0 to 10000
    var tabUniqueId = new Date().getTime() + Math.floor(Math.random() * 10000);
    // create a navigation bar item for the new panel
    var newTabNavElement = $('<li class="nav-item " role="presentation" id="panel_nav_' + tabUniqueId + '"><a class="nav-link " role="tab" data-bs-toggle="tab" href="#editor_' + tabUniqueId + '">' + fileName + '<svg  onclick="close_editor(' + tabUniqueId + ')" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" style="background: var(--bs-gray-700);"><path d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z" fill="currentColor"></path></svg></a></li>');

    // add the new nav item to the DOM
    tabsUlElement.append(newTabNavElement);

    // create a new panel DOM
    var newTabPanelElement = $('#editor_content');



    var tabIndex = $('#editor_div ul li').index($('#panel_nav_' + tabUniqueId));

    console.log('tabIndex: ' + tabIndex);




    // create the editor dom
    var newEditorElement = $('<div class="tab-pane  editor" role="tabpanel" style="padding-bottom: 0px;" id="editor_' + tabUniqueId + '"><textarea class="invisible" style="display: block;"></textarea></div>');

    newTabPanelElement.append(newEditorElement);

    var modelist = ace.require('ace/ext/modelist');
    var modeName = modelist.getModeForPath(fileName).mode;


    var triggerEl = document.querySelector('#editor_header a[href="#editor_' + tabUniqueId + '"]')
    var tab = new bootstrap.Tab(triggerEl)
    tab.show();




    editor = ace.edit('editor_' + tabUniqueId);

    editor.setTheme("ace/theme/vibrant_ink");
    // var StatusBar = ace.require("ace/ext/statusbar").StatusBar;
    // create a simple selection status indicator
    //var statusBar = new StatusBar(editor, document.getElementById("statusBar"));
    //editor.getSession().setMode("ace/mode/html");
    //editor.session.setMode("ace/mode/html");

    editor.session.setMode("ace/mode/matlab", function () {
        // LoadColorPicker()
    })


    editor.session.setValue(result);
    //editors数组
    editors.push({ id: tabUniqueId, instance: editor });
    
}

//关闭标签页
function close_editor(tabUniqueId) {



    for (let i = 0; i < editors.length; i++) {
        if (editors[i].id == tabUniqueId)
            editors.splice(i, 1);
    }


    $('#editor_div').find('#panel_nav_' + tabUniqueId).remove();
    $('#editor_div').find('#editor_' + tabUniqueId).remove();
    //展示editors最后一个tab页
    if (editors.length != 0) {

        var triggerEl = document.querySelector('#editor_header a[href="#editor_' + editors[editors.length - 1].id + '"]')
        var tab = new bootstrap.Tab(triggerEl)
        tab.show();

    }

}

tab分页显示ace代码编辑器的效果：