javascript - 使用 jQuery 中的选择输入追加和删除 div

Question

我正在尝试根据选择菜单的值添加和删除 div。这段代码首先运行良好:当 select 的值为 2 div 时出现。当我返回到第一个值 (1) 时，div 消失。但是，如果我再次选择值 2，则不会再次添加 div。有什么想法吗？

 <select id="interv_base_youorthird" name="interv_base[youorthird]" class="form-control">
      <option value="1">Pour moi</option>
      <option value="2">Pour un tiers</option>
</select>
<input type="hidden" id="extra-counter" value="0">

$("#interv_base_youorthird").change(function(){
    if( $(this).val() == "2" ){
        const index = +$('#extra-counter').val();

        const tmpl = 'hello world';
        //Add sub form
        $('#interv_base_intervExtras').append(tmpl);

        $('#extra-counter').val(index + 1);
    }
    else{
        $('#interv_base_intervExtras').remove();
    }
});

Answer 1

问题是因为当您再次选择第一个选项时，remove() #interv_base_intervExtras 元素。当您返回到第二个选项时，#interv_base_intervExtras 不再存在，无法从中读取 data-prototype 属性。

要解决此问题，请使用 empty() 而不是 remove() 来清除元素的内容，而不是删除整个元素:

var $interv = $('#interv_base_intervExtras');

$("#interv_base_youorthird").change(function(){
  if ($(this).val() === "2") {
    const index = parseInt($('#extra-counter').val(), 10);
    const tmpl = $interv.data('prototype').replace(/__name__/g, index);
    $('#interv_base_intervExtras').append(tmpl);
    $('#extra-counter').val(index + 1);
  } else {
    $('#interv_base_intervExtras').empty(); // <-- amend this
  }
});

请注意，我在上面的示例中稍微修改了逻辑，以缓存 #interv_base_intervExtras 元素并显式使用 parseInt()，而不是使用以下命令将字符串强制转换为 int + 运算符。