Javascript-克隆并删除matchmedia查询中的元素

您好，我正在尝试克隆matchmedia查询中的元素。因此，基本上它只会在媒体查询为

（最大宽度：991px）

时出现，如果媒体查询达到

（最小宽度：992px）

，它将被删除。但当以特定分辨率调整页面大小或加载页面时，会出现问题。示例我在991px上加载或调整页面大小。它将进行克隆，但克隆后将被删除。它在克隆后突然被移除。我只是将

.remove（）

置于else状态

有什么想法或方法吗

我提前感谢大家

function media_query() {
    var mmenu_selector = $('#mmenu-app');
    if (window.matchMedia("(max-width: 991px)").matches) {
        var mainmenu_nav = $('.header-main-menu nav.navbar-collapse')
        var clone = mainmenu_nav.clone().insertAfter('.header-main-menu nav.navbar-collapse');
        clone.attr('id', 'mmenu-app');
        //clean up mmenu by removing bootstrap classes
        mmenu_selector.removeAttr('class');
        mmenu_selector.find('ul').removeClass('navbar-nav nav dropdown-menu animated fadeInDown').removeAttr('id');
        mmenu_selector.find('li').removeClass('nav-item dropdown dropdown-item');
        mmenu_selector.find('li a').removeClass('nav-link dropdown-toggle').removeAttr('data-toggle data-target id');
        // for drupal 8
        mmenu_selector.find('h2').remove();
        // end drupal 8
        setTimeout(function() { 
            var mmenu = new Mmenu(
                document.querySelector( '#mmenu-app' ),
                {
                    navbars: [
                        {
                            content: ['prev', 'breadcrumbs', 'close'],
                        },
                    ],
                    extensions: [
                        "position-left",
                        "theme-dark",
                    ],
                    // wrappers: ["bootstrap"],
                },
            );
        }, 500);
    } else {
        mmenu_selector.remove();
    }
}

$(window).resize(function() { 
    media_query();
});

$(document).ready(function() {
    media_query();
)};

---

你能添加一个CSS和HTML的工作示例吗？谢谢