如何使用jQuery添加更多字段？

Question

I have a 3 input fields with +Add More Button. I want to add more fields when +Add More button is pressed.

When New field will create there should be a remove button to remove newly added row and new row can be create by using +Add More button.

For that I am using following html and jQuery code but can't get the idea how to add / remove fields !

html and jQuery Code

<div id="tab_logic" class="after-add-more">
    <div class="col-md-4">                                
        <div class="form-group">
            <label class="control-label">Logger Name</label>
            <input maxlength="200" type="text" class="form-control" placeholder="Enter Logger Name" name="lg_name[]" />
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label class="control-label">Logger Serial Number</label>
            <input maxlength="200" type="text" class="form-control" placeholder="Enter Serial Number" name="lg_sl[]" />
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label class="control-label">Modem Serial Number</label>
            <input maxlength="200" type="text" class="form-control" placeholder="Enter Modem Serial Number" name="lg_md_sl[]" />
        </div>
    </div>
    <div class="remove-button"></div>
</div>  
<div class="col-md-2">
    <div class="form-group change">
        <label for="">&nbsp;</label><br/>
        <a class="btn btn-success add-more">+ Add More</a>
    </div>
</div>
<div class="more-feilds"></div>

$(document).ready(function() {
    $(".add-more").click(function(){ 
        var html = $("#tab_logic").html();
        $(".more-feilds").append(html);        
    });

    $("body").on("click",".remove",function(){ 
        $(this).parents("#tab_logic").remove();
    });
});

Update :

I have updated my html and jquery code. Now I have +Add More button. When I pressed the button it's adding 3 new input fields which I want. But I want to add remove button to each newly created 3 fields to remove it.

How can I do this ?

Answer 1

you can use the below logic. this will clone the first div.after-add-more and add the remove button on the html.

PS : i have removed the id to avoid duplicate ids in html.ID attribute is not required for this functionality, hope that is not an issue with you.

 $(document).ready(function() { $("body").on("click",".add-more",function(){ var html = $(".after-add-more").first().clone(); // $(html).find(".change").prepend("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>"); $(html).find(".change").html("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>"); $(".after-add-more").last().after(html); }); $("body").on("click",".remove",function(){ $(this).parents(".after-add-more").remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="after-add-more"> <div class="col-md-4"> <div class="form-group"> <label class="control-label">Logger Name</label> <input maxlength="200" type="text" class="form-control" placeholder="Enter Logger Name" name="lg_name[]" /> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label">Logger Serial Number</label> <input maxlength="200" type="text" class="form-control" placeholder="Enter Serial Number" name="lg_sl[]" /> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label">Modem Serial Number</label> <input maxlength="200" type="text" class="form-control" placeholder="Enter Modem Serial Number" name="lg_md_sl[]" /> </div> </div> <div class="col-md-2"> <div class="form-group change"> <label for="">&nbsp;</label><br/> <a class="btn btn-success add-more">+ Add More</a> </div> </div> </div> 

Answer 2

Use .append() instead of .html() . The .append function insert content to the end of each element in the set of matched elements and .html will replace the existing elements.

$(document).ready(function() {
    $(".add-more").click(function(){ 
        var html = $("#tab_logic").html();
        $(".after-add-more").after(html);
        $(".change").append("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");
    });

    $("body").on("click",".remove",function(){ 
        $(this).parents("#tab_logic").remove();
    });
});