使用JQuery動態插入/刪除字段

Question

在jsp中，我有一個加號按鈕，當用戶單擊它時，它會動態生成字段。

現在我想爲每個新添加的字段添加一個刪除鏈接。我插入了一個按鈕並編寫了該函數。但它不會像我預期的那樣刪除父項<tr>。

以下是我的整個腳本。如果在用戶單擊刪除按鈕時有另一種方法刪除該行，請提供幫助。

在此先感謝。

我的腳本：

<script> 
    $(document).ready(function() { 

     var iCnt = 1; 
     // CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS. 


     $('#plusbtn').click(function() { 
      if (iCnt <= 14) { 

       iCnt = iCnt + 1; 

       // ADD TEXTBOX. 
       $('#headingrow').append('<tr align="left" valign="middle" id="sampleTr" >'+ 
         '<td width="12%" valign="bottom" class="content">'+ 

         '<select style=" width:165px;" name=attrtype'+iCnt+' ' + 'class="content" id=attrtype'+iCnt+' ' + 'onchange="specialAttr(this);">'+ 

         '<option selected="selected" value="">-Data Type-</option>'+ 
         '<option value="text">Text</option>'+ 
         '<option value="number">Number</option>'+ 
         '<option value="currency">Currency</option>'+ 
         '<option value="percentage">Percentage</option>'+                        
         '<option value="date">Date</option>'+ 
         '</select>'+ 

         '<input style=" width:165px;" name=attr'+iCnt+' ' + 'id=attr' + iCnt + ' ' + 'type="text" class="content" value="" placeholder="Attribute Name">'+ 

         '<input style=" width:95px;" name=attrDec'+iCnt+' '+ 'id=attrDec' + iCnt + ' ' + 'type="hidden" class="content" value="" placeholder="Decimal Points">'+ 


         '<input style=" width:90px; background-color: white; color: Red; border: 0px solid;" name="attrRem" id="attrRem" type="button" class="content" value="Remove" >'+ 
        '</td>'+ 
       '</tr>'); 


      } 
      // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. 
      // (20 IS THE LIMIT WE HAVE SET) 
      else {  
       $('#plusbtn').hide(); 
      } 

      $('#attrRem').click(function(){ 
       //window.alert(this.value); 
       e.preventDefault(); 
       $(this).parent("tr").remove(); 
       iCnt = iCnt-1; 
      }); 

     }); 





    }); 

</script> 

Answer 1

.closest方法instread您需要創建一個函數，而不是點擊事件或綁定現場活動。因爲每次單擊添加按鈕時都會操作DOM。

嘗試更新的代碼

<script> 
    $(document).ready(function() { 
     var iCnt = 1; 
     // CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS. 
     $('#plusbtn').click(function() { 
      if (iCnt <= 14) { 
      iCnt = iCnt + 1; 
      // ADD TEXTBOX. 
      $('#headingrow').append('<tr align="left" valign="middle" id="sampleTr" >'+ 
        '<td width="12%" valign="bottom" class="content">'+ 

        '<select style=" width:165px;" name=attrtype'+iCnt+' ' + 'class="content" id=attrtype'+iCnt+' ' + 'onchange="specialAttr(this);">'+ 

        '<option selected="selected" value="">-Data Type-</option>'+ 
        '<option value="text">Text</option>'+ 
        '<option value="number">Number</option>'+ 
        '<option value="currency">Currency</option>'+ 
        '<option value="percentage">Percentage</option>'+                        
        '<option value="date">Date</option>'+ 
        '</select>'+ 

        '<input style=" width:165px;" name=attr'+iCnt+' ' + 'id=attr' + iCnt + ' ' + 'type="text" class="content" value="" placeholder="Attribute Name">'+ 

        '<input style=" width:95px;" name=attrDec'+iCnt+' '+ 'id=attrDec' + iCnt + ' ' + 'type="hidden" class="content" value="" placeholder="Decimal Points">'+ 


        '<input style=" width:90px; background-color: white; color: Red; border: 0px solid;" name="attrRem" id="attrRem" type="button" class="content" value="Remove" click="remove(this);" >'+ 
       '</td>'+ 
      '</tr>'); 
     } 
     // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. 
     // (20 IS THE LIMIT WE HAVE SET) 
     else {  
      $('#plusbtn').hide(); 
     } 
    }); 
}); 
function remove(currObj){ 
     var $this=$(currObj); 
     $this.parent().remove(); 
} 
</script> 

編碼愉快:)

Answer 2

parent()的jQuery的分法直接父。你的情況這是爲「TD」不「TR」

因此，要解決這一嘗試使用.parent()

$('#attrRem').click(function(e){ 
      //window.alert(this.value); 
      e.preventDefault(); 
      $(this).closest("tr").remove(); 
      iCnt = iCnt-1; 
     });