使用带有递增ID的jquery clone添加更多添加更少

时间:2015-09-10 06:15:39

标签: javascript jquery html css

在我需要添加和删除行的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而不是一个而Iam尝试添加id和名称动态递增

我知道它可能是重复但仍然无法得到为什么我无法增加id和名称。对于btn较少的第一个div btn_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>

请帮助我

谢谢&amp;问候 马哈德

0 个答案:

没有答案