移除quarter类元素后，无法动态追加生成的HTML内容问题

我看了你遇到的问题：切换年份时，想移除之前生成的带quarter类的元素，但$('.quarter').remove()没有生效。这里有两个可靠的解决方案，帮你搞定这个问题：

方案1：精准定位要移除的元素 #

你的动态元素是追加在#year元素之后的，所以可以直接限定只删除#year后面的所有quarter元素，这样既能保证删除目标元素，又不会误操作页面其他地方的同类型元素：

$('.selYear').change(function() { 
    var years = $(this).val(); 
    // 精准定位：只删除#year元素之后的所有quarter元素
    $('#year').nextAll('.quarter').remove(); 
    var myHtml = ''; 
    if (years.length > 0) { 
        for (var x = 0; x < years.length; x++) { 
            myHtml += '<div class="form-group row justify-content-center quarter">'; 
            myHtml += '<label class="col-sm-4 col-form-label">' + 'Quarters' + ' ' + years[x] + '</label>'; 
            myHtml += '<div class="col-sm-4">'; 
            myHtml += '<select class="selQtr" name="quarters[]" multiple>'; 
            myHtml += '<option>Q1</option>'; 
            myHtml += '<option>Q2</option>'; 
            myHtml += '<option>Q3</option>'; 
            myHtml += '<option>Q4</option>'; 
            myHtml += '</select>'; 
            myHtml += '</div>'; 
            myHtml += '</div>'; 
        } 
    } else { 
        myHtml = ''; 
    } 
    $('#year').after(myHtml); 
    // $('.selQtr').selectpicker(); 
}); 

方案2：用容器包裹动态内容（更推荐） #

这种方法更可控，把所有动态生成的quarter元素放在一个专门的容器里，每次切换年份时直接清空容器再重新添加内容，彻底避免残留问题：

修改HTML #

在#year元素后面添加一个专属容器：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="form-group row justify-content-center" id="year"> 
    <label class="col-sm-4 col-form-label"> Years :</label> 
    <div class="col-sm-4"> 
        <select class="selYear" name="years[]" multiple> 
            <option>2016</option> 
            <option>2017</option> 
            <option>2018</option> 
            <option>2019</option> 
            <option>2020</option> 
            <option>2021</option> 
            <option>2022</option> 
            <option>2023</option> 
            <option>2024</option> 
            <option>2025</option> 
            <option>2026</option> 
        </select> 
    </div> 
</div>
<!-- 新增容器，专门存放动态生成的季度元素 -->
<div id="quarter-container"></div>

修改JS代码 #

把动态内容放入容器，每次切换前先清空容器：

$('.selYear').change(function() { 
    var years = $(this).val(); 
    // 直接清空容器，确保没有残留
    $('#quarter-container').empty(); 
    var myHtml = ''; 
    if (years.length > 0) { 
        for (var x = 0; x < years.length; x++) { 
            myHtml += '<div class="form-group row justify-content-center quarter">'; 
            myHtml += '<label class="col-sm-4 col-form-label">' + 'Quarters' + ' ' + years[x] + '</label>'; 
            myHtml += '<div class="col-sm-4">'; 
            myHtml += '<select class="selQtr" name="quarters[]" multiple>'; 
            myHtml += '<option>Q1</option>'; 
            myHtml += '<option>Q2</option>'; 
            myHtml += '<option>Q3</option>'; 
            myHtml += '<option>Q4</option>'; 
            myHtml += '</select>'; 
            myHtml += '</div>'; 
            myHtml += '</div>'; 
        } 
    } 
    // 将生成的内容放入容器
    $('#quarter-container').html(myHtml); 
    // $('.selQtr').selectpicker(); 
}); 

为什么原来的代码可能无效？ #

大概率是因为$('.quarter')选择器太宽泛，如果页面其他地方也存在带quarter类的元素，可能导致选择器没有正确定位到你要删除的目标元素；或者在某些DOM渲染时机下，选择器没能及时找到已生成的元素。上面的两种方法，要么精准缩小选择范围，要么用容器统一管理动态内容，都能彻底解决这个问题。

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