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

parent() jquery方法指向直接父级。在你的情况下，“td”不是“tr”

因此，要解决此问题，请尝试使用.closest

的.parent()方法instread

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

Answer 2

您需要创建一个函数而不是单击事件或绑定一个实时事件。因为每次单击“添加”按钮时都会操纵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>

快乐编码：）

使用JQuery动态插入/删除字段

2 个答案: