添加更多的添加更少使用jquery克隆与增量id

add more add less using jquery clone with incrementing id

本文关键字：添加 id jquery      更新时间：2023-09-26

目前在jquery克隆工作，我需要绘制和删除行，我已经在stackoverflow和谷歌中搜索了很多，基于此，我了解一点关于jquery克隆将如何工作。

有什么建议请提

这是jquery代码。

        var count=0;
    $(document).on("click", ".phn_btn_more", function () { 
        var $clone = $('.cloned-row:eq(0)').clone();
        //alert("Clone number" + clone);
         $clone.find('[id]').each(function(){this.id+='someotherpart'});
        $clone.attr('id', "added"+(++count));
        $('.cloned-row:eq(0)').after($clone);
    });
$(document).on('click', ".btn_less1", function (){
    var len = $('.cloned-row').length;
    if(len>1){
        $(this).closest(".btn_less1").parent().parent().parent().remove();
    }
});

使用当前代码更新的代码，我可以动态地增加id，但它克隆两次。

与此代码，当我尝试点击添加更多的按钮，它克隆的div，但我得到两个div而不是一个，我试图添加id和名称动态递增

我知道这可能是一个可能的重复，但我仍然不明白为什么我不能增加id和名称。对于btn_less，对于第一个div, btn_less类将不可用，一旦用户单击add more从第二个add less按钮应该出现

下面是html代码

 <div class="em_pho cloned-row" id="phone_content">
                         <select id="sel_phntype" name="sel_phntype" class="sslt_Field">
                            <option selected='selected' value="">Phone Type</option>
                            <option value="BUSN">Business</option>
                            <option value="CAMP">Campus</option>
                            <option value="CELL" >Cellphone</option>
                            <option value="CEL2">Cellphone2</option>
                            <option value="FAX">FAX</option>
                            <option value="HOME">Home</option>
                            <option value="OTR">Other</option>
                         </select>
                         <span class = "ph-inline">
                            <input type="text" class="cc_field" placeholder="Country Code" id="txt_CC" maxlength="3" name="txt_CC" /> 
                            <input type="text" class="pn_field" placeholder="Phone Number" id="txt_Pno" name="txt_Pno" />
                            <input type="radio" name="preferred" id="rad_Prf" value="preferred">
                            <label class="radio-label">Preferred</label>
                            <!--<button class="btn_more" id="buttonvalue"></button>-->
                            <input type="button" class="phn_btn_more" id="buttonvalue"/>
                         </span>
                      </div>

请帮帮我

谢谢,问候马哈德文

不确定这是不是你想要的。

JSfiddle

如果我错过了什么，或者有什么地方错了，请告诉我。

JQuery 

var count=0;
    $(document).on("click", ".phn_btn_more", function () { 
        var $clone = $('.cloned-row:eq(0)').clone();
        //alert("Clone number" + clone);
         $clone.find('[id]').each(function(){this.id+='someotherpart'});
         $clone.find('.phn_btn_more').after("<input type='button' class='btn_less1' id='buttonless' value = 'remove'/>")
        $clone.attr('id', "added"+(++count));
        $(this).parents('.em_pho').after($clone);
    });
    $(document).on('click', ".btn_less1", function (){
        var len = $('.cloned-row').length;
        if(len>1){
            $(this).parents('.em_pho').remove();
        }
    });
相关文章：