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

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

javascript jquery

Javascript 使用JQuery动态插入/删除字段,javascript,jquery,Javascript,Jquery,在jsp中，我有一个加号按钮，当用户单击它时，它会动态生成字段现在我想为每个新添加的字段添加一个删除链接。我已经插入了一个按钮并编写了函数。但它并没有像我预期的那样删除父级以下是我的整个剧本。当用户单击“删除”按钮时，如果有其他方法删除该行，请提供帮助提前谢谢我的剧本： <script> $(document).ready(function() { var iCnt = 1; // CREATE A "DIV" ELEMENT AND

在jsp中，我有一个加号按钮，当用户单击它时，它会动态生成字段

现在我想为每个新添加的字段添加一个删除链接。我已经插入了一个按钮并编写了函数。但它并没有像我预期的那样删除父级

以下是我的整个剧本。当用户单击“删除”按钮时，如果有其他方法删除该行，请提供帮助

提前谢谢

我的剧本：

<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>


$（文档）.ready（函数（）{
var-iCnt=1；
//创建一个“DIV”元素，并使用JQUERY.css（）类设计它。
$（'#plusbtn'）。单击（函数（）{
jquery的if（iCntparent（）
方法指向直接父级。在您的例子中，它是“td”而不是“tr”
因此，要解决这个问题，请尝试使用.closest
方法而不是.parent（）

parent（）
jquery方法指向直接父级。在您的例子中，直接父级是“td”而不是“tr”
因此，要解决这个问题，请尝试使用.closest
方法而不是.parent（）

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


$（文档）.ready（函数（）{
var-iCnt=1；
//创建一个“DIV”元素，并使用JQUERY.css（）类设计它。
$（'#plusbtn'）。单击（函数（）{
如果（iCnt您需要创建一个函数，而不是单击事件或绑定活动事件。因为您的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> 


$（文档）.ready（函数（）{
var-iCnt=1；
//创建一个“DIV”元素，并使用JQUERY.css（）类设计它。
$（'#plusbtn'）。单击（函数（）{
如果（iCnt提供JSFIDLE如果可能的话它是否进入点击事件？Dhara Parmar是的，我已经发出警报并检查了。它进入了内部，并且这个元素值被正确获取。如果可能的话提供JSFIDLE它是否进入点击事件？Dhara Parmar是的，我已经发出警报并检查了。它进入了内部，并且这个元素值被正确获取了。）Dipsin感谢您的回答。我尝试了但仍然没有工作：（Hardipsin感谢您的回答。我尝试了但仍然没有工作：（非常感谢您它工作了。但是我如何减少count变量。因为我必须允许用户添加最多15个字段。不必每次都计数，只需检查tr countvar iCnt=$（“#headingrow tr”）.length
您需要将此代码放入click event中。感谢Jitendra Tiwari感谢您的帮助。但是如何减少count变量。因为我必须允许用户添加最多15个字段。不需要每次都计数，只需选中tr countvar iCnt=$（“#headingrow tr”）.length
您需要将此代码放入click事件中。谢谢Jitendra Tiwari