如何用jQuery清除指定容器中除Canvas外的元素（BabylonJS场景）

这个需求很常见，咱们只需要精准清除#insertHere容器中除了包含canvas的main元素之外的所有子元素，就能完美保留你的BabylonJS画布不被重建，同时每次切换模式时清空旧的导航/侧边栏内容。

具体实现步骤 #

1. 修正jQuery选择器错误：你代码里的$("insertHere")漏掉了ID选择器的#，必须改成$("#insertHere")，否则无法正确定位容器。
2. 添加核心清除逻辑：在切换模式的点击事件中，先执行清除操作，再调用Create()生成新内容。

修改后的完整代码片段 #

var content = ""; 
var construct = true; 
var visualize = false; 

function Create(){ 
    content = ""; 
    if(construct == true && visualize == false){ 
        content += "<div id='1'> <p> hello</p></div><div><p>Insert a lot of html here</p></div>"; 
        $("#insertHere").append(content); // 修正：添加ID选择符#
    } 
    if(construct == false && visualize == true){ 
        content += "<div id='not1'><p> Definitely not the same content as the construct one</p></div>"; 
        $("#insertHere").append(content); // 修正：添加ID选择符#
    } 
} 

$(window).ready(function(){ 
    Create(); 
    $("#switchmode").click(function(){ 
        construct = !construct; 
        visualize = !visualize; 

        // 核心清除逻辑：保留包含canvas的main元素，删除其他所有子元素
        $("#insertHere").children().not("main.HolyGrail-content").remove();

        Create(); // 原代码的CreationPage应该是笔误，改成Create()
    }); 
});

方案原理说明 #

• $("#insertHere").children()：获取容器下所有直接子元素
• .not("main.HolyGrail-content")：精准排除掉包含canvas的main容器（你的画布就嵌套在这个容器里）
• .remove()：删除剩下的所有动态添加的元素，全程不影响canvas和BabylonJS的运行实例

这样每次切换模式时，旧的导航栏、侧边栏会被彻底清除，新内容能正确加载，而画布完全不用重新初始化，既满足需求又保证了性能。

内容的提问来源于stack exchange，提问作者legallon