添加/刪除輸入字段

我有一個愚蠢的錯誤，我忽略了。我可以通過單擊加號按鈕將項目添加到表單中，但我無法刪除已添加的項目。這裏是我的代碼：添加/刪除輸入字段

<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的調用。 –

添加/刪除輸入字段

回答

相關問題