Ajax无刷新场景下jQuery append追加元素防重复的解决方法

Ajax无刷新交互场景下，.fcorte容器节点不会随着逻辑重复触发被浏览器重置，当前代码每次执行都会无条件创建新的label、br、select节点追加到容器内，没有做存在性校验或者容器清理，自然会出现元素重复累积的问题。另外重复生成同id="fcorte"的元素本身违反HTML规范，会导致后续事件绑定、DOM选择出现异常。

根据实际业务场景选择其中一种即可：

• 方案1：追加前清空容器（最简便，适合.fcorte容器内只有这一组动态生成元素的场景）
  只需要在执行append操作前，先清空容器内的所有子节点即可，修改后的核心代码如下：

var values = ["15", "30"];
var select = $('<select class="form-control">').prop('id', 'fcorte').prop('name', 'fcorte');
$(values).each(function(e) {
    select.append($("<option>")
        .prop('value', this)
        .text(this.charAt(0).toUpperCase() + this.slice(1))
    );
});
var label = $("<label class='col-form-label'>").prop('for', 'fcorte').text("Choose your pets: ");
var br = $("<br>");
// 追加前先清空容器内原有内容
$(".fcorte").empty().append(label).append(br).append(select);

• 方案2：判断元素不存在时才追加（适合.fcorte容器内还有其他固定内容、不能整体清空的场景）
  提前判断目标select是否已经存在，只有不存在的时候才走创建、追加逻辑，避免重复生成：

// 校验目标元素是否已生成，已生成则直接跳过创建逻辑
if ($('#fcorte').length === 0) {
  var values = ["15", "30"];
  var select = $('<select class="form-control">').prop('id', 'fcorte').prop('name', 'fcorte');
  $(values).each(function(e) {
      select.append($("<option>")
          .prop('value', this)
          .text(this.charAt(0).toUpperCase() + this.slice(1))
      );
  });
  var label = $("<label class='col-form-label'>").prop('for', 'fcorte').text("Choose your pets: ");
  var br = $("<br>");
  $(".fcorte").append(label).append(br).append(select);
}

• 方案3：精准移除旧关联元素后再追加（适合需要每次触发都更新下拉选项、同时保留容器内其他无关元素的场景）
  不需要清空整个容器，只需要删除之前生成的和fcorte相关的节点，再插入新内容即可：

var values = ["15", "30"];
var select = $('<select class="form-control">').prop('id', 'fcorte').prop('name', 'fcorte');
$(values).each(function(e) {
    select.append($("<option>")
        .prop('value', this)
        .text(this.charAt(0).toUpperCase() + this.slice(1))
    );
});
var label = $("<label class='col-form-label'>").prop('for', 'fcorte').text("Choose your pets: ");
var br = $("<br>");
// 精准移除历史生成的关联元素
$(".fcorte").find('label[for="fcorte"], #fcorte').each(function() {
  // 移除元素后面跟着的br换行
  if ($(this).next('br').length) $(this).next('br').remove();
  $(this).remove();
});
// 追加新生成的元素
$(".fcorte").append(label).append(br).append(select);

补充提示：如果给这个select绑定过自定义事件，涉及元素重复删除、新增的场景下建议用事件委托的方式绑定事件，避免新插入的元素事件失效。

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