如何修复javascript中的appel函数

我正在开发一个动态表单来添加许多选项，然后我将这些时髦的元素注入我的数组中，添加效果很好，但删除似乎不太好，因此当我尝试使用2或3个选择时，它似乎很好，但当我添加4或5个选择并尝试删除第3个选择时，remove函数执行多次，这会影响数组的结果

html

领域
...
服务1
服务2
服务3
服务4
+
您的代码有两个问题：
您正在将一个单击事件处理程序绑定到另一个事件处理程序中，这就是第二个事件多次触发的原因。把这两件事分开

其次，当两个事件分开时，您需要使用，因为您将第二个事件绑定到一个可能还不存在的元素。为此，我将
功能更改为


$（文档）.ready（函数（）{
var-next=1；
变量选择=['service1'、'service2'、'service3'、'service4']；
var listService=[]；//[{'id'：下一步，'target_service'：$（'#field1'）.val（）}]；
console.log（listService）；
$（“.add more”）。在（'click'，函数（e）{
e、 预防默认值（）；
var addto=“#字段”+下一步；
var addRemove=“#字段”+（下一步）；
下一个=下一个+1；
var newIn=''；
//纽因+=‘维耶雷斯·乔伊斯联合国服务’；
newIn+=''；
纽因+='…'；
对于（变量i=0；i


领域
...
服务1
服务2
服务3
服务4
+
您的代码有两个问题：
您正在将一个单击事件处理程序绑定到另一个事件处理程序中，这就是第二个事件多次触发的原因。把这两件事分开

其次，当两个事件分开时，您需要使用，因为您将第二个事件绑定到一个可能还不存在的元素。为此，我将
功能更改为


$（文档）.ready（函数（）{
var-next=1；
变量选择=['service1'、'service2'、'service3'、'service4']；
var listService=[]；//[{'id'：下一步，'target_service'：$（'#field1'）.val（）}]；
console.log（listService）；
$（“.add more”）。在（'click'，函数（e）{
e、 预防默认值（）；
var addto=“#字段”+下一步；
var addRemove=“#字段”+（下一步）；
下一个=下一个+1；
var newIn=''；
//纽因+=‘维耶雷斯·乔伊斯联合国服务’；
newIn+=''；
纽因+='…'；
对于（变量i=0；i


领域
...
服务1
服务2
服务3
服务4
+
使用您的解决方案，“添加”按钮不再工作还有一个问题，尝试将4个服务从服务1添加到4，然后删除服务3，然后删除服务4，您会注意到服务4仍然存在，这是我现在的问题，提前谢谢。只需更新脚本和fiddel：问题是数组的索引。首先删除服务3时，数组长度为3，但删除服务4时，数组长度为
listService.splice（fieldNum-1，1）试图删除索引3上的元素，因为
fieldNum<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row">
        <p id="count"  ></p>
        <div class="control-group" id="fields">
            <label class="control-label" for="field1">Fields</label>
            <div class="controls" id="profs"> 
                <form class="input-append">
                    <div class="form-group">

    <select class="custom-select mr-sm-2" id="field1">
        <option selected>...</option>
      <option>service1</option>
      <option>service2</option>
      <option>service3</option>
      <option>service4</option>

    </select>
  </div>
                    <button id="b1" class="btn add-more" type="button">+</button></div>
                    <!--<div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/>

  $(document).ready(function(){
    var next = 1;
    var selection=['service1','service2','service3',"service4"];
    var listService=[];//[{'id':next,'target_service':$('#field1').val()}];
    console.log(listService);
    $(".add-more").click(function(e){
        e.preventDefault();
        var addto = "#field" + next;
        var addRemove = "#field" + (next);
        next = next + 1;
        var newIn = '<id="field" ><label>';
        //newIn+='Veuillez choisir un service</label>';
        newIn+='<select class="custom-select mr-sm-2" id=field'+next+'>';
        newIn+=' <option selected>...</option>';
        for(var i=0;i<selection.length;i++){
            newIn+='<option>'+selection[i]+'</option>';
        }
        newIn+=' </select></div>';

        var newInput = $(newIn);
        var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
        var removeButton = $(removeBtn);

        $(addto).after(newInput);
        $(addRemove).after(removeButton);
        $("#field" + next).attr('data-source',$(addto).attr('data-source'));
        $("#count").val(next);
        var value=$('#field'+(next-1)).val();
        listService.push({'id':next,'target_service':value});
        console.log(listService);

            $('.remove-me').click(function(e){
                e.preventDefault();
                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#field" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                listService.splice(fieldNum-1, 1);
                console.log(fieldNum);
                console.log(listService);
            });


    });



});