2015-01-20 165 views
0
<div id="Bulk_DiV"> 
     <p> 
      <a href="#" id="addBulk" class="link_icon_plus"></a>&nbsp; 
      <input type="text" id="BulkItem[0]_Quantity" size="20" name="BulkItem[0].Quantity" placeholder="Please enter quantity..."/>&nbsp; 
      <input type="text" id="BulkItem[0]_UnitPrice" size="20" name="BulkItem[0].UnitPrice" placeholder="Please enter unit price..."/>&nbsp; 
      <input type="text" id="BulkItem[0]_TotalPrice" size="20" name="BulkItem[0].TotalPrice" placeholder="Please enter total price..."/> 
     </p> 
    </div> 


<script> 
     $(function() { 
      var bulkDiv = $('#Bulk_DiV'); 
      var i = $('#Bulk_DiV p').size(); 

      $('#addBulk').live('click', function() { 

        bulkDiv.append('<p>'); 
      $('<a>').attr({ 
       href: '#', 
       id: 'addBulk', 
       class: 'link_icon_plus' 
      }).appendTo(bulkDiv); 

      bulkDiv.append('&nbsp;&nbsp;'); 

      $('<input>').attr({ 
       type: 'text', 
       id: 'BulkItem_Quantity', 
       name: 'BulkItem[' + i + '].Quantity', 
       size: '20', 
       placeholder: 'Please enter quantity...' 
      }).appendTo(bulkDiv); 

      bulkDiv.append('&nbsp;&nbsp;'); 

      $('<input>').attr({ 
       type: 'text', 
       id: 'BulkItem_UnitPrice', 
       name: 'BulkItem[' + i + '].UnitPrice', 
       size: '20', 
       placeholder: 'Please enter unit price...' 
      }).appendTo(bulkDiv); 

      bulkDiv.append('&nbsp;&nbsp;'); 

      $('<input>').attr({ 
       type: 'text', 
       id: 'BulkItem_TotalPrice', 
       name: 'BulkItem[' + i + '].TotalPrice', 
       size: '20', 
       placeholder: 'Please enter total price...' 
      }).appendTo(bulkDiv); 
      bulkDiv.append('&nbsp;&nbsp;'); 
      $('<a>').attr({ 
       href: '#', 
       id: 'removeBulk', 
       name: 'removeBulk', 
       class: 'link_icon_minus' 
      }).appendTo(bulkDiv); 

       bulkDiv.append('</p>'); 

       i++; 
       return false; 
      }); 

      $('#removeBulk').live('click', function() { 
       if (i > 1) { 
        $(this).parents("p").remove(); 
        i--; 
       } 
       return false; 
      }); 
     }); 
    </script> 

這是我的代碼,我可以動態添加文本框,但我不能刪除它雖然我使用.remove()。它假設工作,但當我改變代碼中的東西,它不再工作。我無法找到任何錯誤... 所有的文本框都有自己的ID爲了獲取數據。Javascript刪除文本框動態添加

+1

您使用的是什麼版本的jQuery? 'live()'已被棄用了很長一段時間。一個複製你的問題的演示也將幫助 – charlietfl 2015-01-20 18:40:14

+0

它已被*刪除*兩年了。 – 2015-01-20 18:41:43

+1

您正在使用'bulkDiv.append('

');'和'bulkDiv.append('

');'不正確。不要將所有這些文本字段和鏈接包裝到段落中,而是在行的開頭和結尾創建空白段落。因此'$(this).parents(「p」)'沒有找到任何匹配的元素。不幸的是,我的jquery技能目前有點生疏,我不能寫出體面的修復 - 因此我寫這個評論,而不是一個答案。 – user1702401 2015-01-20 18:55:52

回答

0

首先,.live已棄用。改用.on代替。其次,我建議使用諸如Handlebars模板之類的東西爲每個項目創建HTML,否則不要每次添加一個元素。附加非中斷空格也不是一個好主意,請使用CSS爲您的元素提供一些空間。

您可以使用「BulkItem []。TotalPrice」等作爲輸入名稱,而不是使用i變量來計算索引。提交給服務器時,它將轉換爲一系列項目。

請勿重複使用ID。改用類。

對於移除,您可以在容器元素上使用冒泡事件。這基本上意味着「當在#Bulk_DiV中單擊具有.item-remove類的任何元素時,請使用類.item刪除最接近的父元素」。像這樣的委託事件允許您使用單個處理程序,而不是爲每個元素附加一個處理程序。這使得大量元素具有更好的性能。

$('#Bulk_DiV').on('click', '.item-remove', function() { 
 
    $(this).closest('.item').remove(); 
 
});

+0

謝謝你的寶貴解釋。這對我有幫助 – 2015-01-21 04:00:06

+0

我有一個問題是如何驗證動態添加的文本框? – 2015-01-21 06:07:45