添加/删除输入字段

我有一个愚蠢的错误，我忽略了。我可以通过单击加号按钮将项目添加到表单中，但我无法删除已添加的项目。这里是我的代码：添加/删除输入字段

<script> 
    $(document).ready(function(){ 
     var item_index=0; 

     $("#add_additional_item").click(function(){ 

      item_index++; 
      $("#Additional_item").attr("placeholder", "Additional Item " + item_index); 
      $("#Additional_items_wrap p").attr("id", "remove_additional_item" + item_index); 
      $("#number_of_fields").attr("value", item_index); 

$(this).parent().before($("#Additional_items_wrap").clone().attr("id","Additional_items_wrap" + item_index)); 
      $("#Additional_items_wrap" + item_index).css("display","inline"); 

      $("#Additional_items_wrap" + item_index + " :input").each(function(){ 
       $(this).attr("name",$(this).attr("name") + item_index); 
       $(this).attr("id",$(this).attr("id") + item_index); 

      }); 

      $("#remove_additional_item" + item_index).click(function(){ 

       $(this).closest("div").remove(); 
       item_index--; 
      }); 
     }); 
    }); 
</script>

的HTML：

  <label>Add Additional Item:</label> 
     <input type="hidden" id="number_of_fields" name="number_of_fields">       

     <div id="Additional_items_wrap" class="hidden"> 

      <input type="text" name="Additional_item" id="Additional_item"> 
      <p class="icon-minus" id="remove_additional_item"></p> 

     </div> 

     <div id="input_add_item"> 

      <p id="add_additional_item" class="icon-plus" style="float:right; cursor:pointer"></p> 

     </div>

来源

2014-01-20 henk.io

你想要删除什么？段落标记的父元素？ – stackErr

嗨是的，我想要删除ID与div additional_items_wrap –

你不能使用像这样的索引coz假设你有4个输入和你删除第二个..和你做索引 - 所以计数将被设置为2，当时你添加索引，将会有一个索引号相同的元素。 –

您正在尝试使用jQuery动态HTML，在这里看到：

“的原因是，你不能绑定一个处理程序目前DOM中不存在的项目“ jquery click event not working for dynamic fields

更新：下面是我的意思的示例。

$(document).on("click", "#remove_additional_item" + item_index, function() { 
    alert ("You just hit the jackpot!"); 
});

来源

2014-01-20 21:29:36

不能创建一个静态按钮，然后使用克隆方法将按钮复制到每个按钮，这样就有一个实际存在于dom中的按钮。你只是在欺骗DOM？ – Cam

我不认为我在欺骗DOM，因为我只是使用已存在的元素。我不熟悉克隆方法，但他也可以在他创建的html中嵌入对Javascript的调用。 –

添加/删除输入字段

回答

相关问题