javascript - 使用带有递增 id 的 jquery clone 添加更多添加更少

Question

Curerntly 在 jquery clone 上工作，我需要在其中添加行和删除行我在 stackoverflow 和 google 中搜索了很多，基于此我对 jquery clone 的工作方式有了一些了解。

有什么建议吗

这是 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 和 name。对于第一个 div 的 btn less btn_less 类将不可用一旦用户单击从第二个添加更多按钮应该出现 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>

请帮助我

谢谢和问候 马哈德万

Answer 1

不确定这是否是您想要的。

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();
        }
    });