ASP.NET jQuery：当下拉列表发生更改时，如何删除另一个div元素之外的div元素？

这是我的部门结构

 <div class="row-fluid">
        <div class="span12">
            <div style="overflow: auto; width: 90%;" class="goleft">
                <div style="display: inline-block; width: 200px;">
                    <p>
                        <select name="DropDownList3" id="DropDownList3" class="form-control show-tick">
                            <option value="--Pilih Periode--">--Pilih Periode--</option>
                            <option value="Juni, 2017">Juni, 2017</option>
                            <option value="Juli, 2017">Juli, 2017</option>
                        </select>
                    </p>
                </div>
                <div style="display: inline-block; width: 150px;">
                    <a id="LinkButton3" class="btn btn-primary btn-link-2 btn-block btReload-3 has-spinners" href="javascript:__doPostBack(&#39;LinkButton3&#39;,&#39;&#39;)">Muat Ulang</a>
                </div>
            </div>
        </div>
    </div>
    <div id="bar_chart_container">
        <p>Chart total</p>
        <canvas id="bar_chart" height="250" class="chart"></canvas>
    </div>

--皮利期--
Juni，2017年
朱利，2017

图表总数

当

id=“DropDownList3”

已经更改，我想删除div中ID

ID=“bar\u chart”

的画布，ID

ID=“bar\u chart\u container”

位于

中未分组的div的最后一个div中，并附加具有相同ID的新画布。jQuery是如何完成的

在这里，我走了这么远，但并没有像预期的那样完美地工作

var cvs=$（“#条形图”）.find（“：last child”）.not（“：only child”）.remove（）；
$（“#条形图”）.remove（）；
$（'#条形图\容器'）。附加（''）；
var ctx=$（“#条形图”）.get（0.getContext（'2d'）
您不需要删除元素，然后重新创建相同的元素，因为您只需回到开始时的位置即可

假设您只需在更改下拉列表时隐藏画布，那么您只需将
onchange
事件处理程序附加到
框，然后将其绑定到隐藏所需元素的函数。在这里，我创建了一个名为
dropdownChange（）
的函数，并调用
onchange=“dropdownChange（）”
。我在画布上添加了一个轻微的边框，以增加清晰度


函数dropdownChange（）{
document.getElementById（'bar_chart'）。style.display='none'；
}
#条形图{
边框：1px纯黑；
}


--皮利期--
Juni，2017年
朱利，2017

图表总数

谢谢你的评论，我很感谢你的帮助，但是隐藏画布对我的问题不起作用。如果我选择了两次或两次以上的选项更改，那么我之前选择的系列就不清楚了。我添加了第二个示例，通过更改边框颜色清楚地显示了新画布的删除和创建。我尝试过，但画布只是显示边框，我丢失了数据和系列。而且，如果我多次更改该选项，画布也会附加更多内容