使用JQuery移除第二个canvas标签的方法咨询

你之前的代码无效是因为：$("<canvas id=&quot;compoundingChart&quot; height=&quot;120&quot;&gt;&lt;/canvas&gt;")是创建一个新的canvas元素，而非选中页面上已存在的第二个canvas，所以hide()不会对页面里的目标元素生效。

另外需要注意：HTML规范要求id属性必须唯一，你页面里两个canvas共用id="compoundingChart"属于不规范写法，后续可能引发其他问题，建议尽量避免。

以下是几种可行的解决方案：

方案1：通过索引选中第二个canvas #

用标签选择器获取所有canvas元素，再通过eq(1)选中第二个（索引从0开始），调用remove()彻底移除（若仅需隐藏替换为hide()即可）：

$(function() {
    $("canvas").eq(1).remove();
});

方案2：通过属性特征定位目标canvas #

如果第二个canvas的height="120"是独有的特征，可使用属性选择器定位：

$(function() {
    $("canvas[height='120']").remove();
});

方案3：修正id后用id选择（推荐） #

先修改HTML，给两个canvas设置唯一id：

<canvas id="compoundingChart1" height="480" width="1204" style="display: block; height: 240px; width: 602px;" class="chartjs-render-monitor"></canvas>

<canvas id="compoundingChart2" height="120"></canvas>

再直接用id选择器移除第二个：

$(function() {
    $("#compoundingChart2").remove();
});

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