Add/Remove Input Fields Dynamically

Add/Remove Input Fields Dynamically with jQuery

by Akram kamal

HTML

<div class="input_fields_wrap">
    <button class="add_field_button btn btn-info">Add More Fields</button>
    <div><input class="dyn" type="text" name="mytext[]"></div>
</div>
    
    <!--
   http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery
-->
    
    <button class="peek"> peek </button>

CSS

.input_fields_wrap .remove_field {
font-size: 0.80em;
}

a {
color: #428bca;
text-decoration: none;
}

a {
background: transparent;
}

.btn, #submit {
display: inline-block;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 5px 15px;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
font-size: 0.80em;
text-transform: uppercase;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22);
border-bottom: 3px solid #000;
}

.btn-info {
color: #ffffff;
background-color: #5bc0de;
border-color: #46b8da;
}
.input_fields_wrap input[type=text] {
padding: 0px 5px 0px 5px;
margin: 2px 3px 3px 0;
font-size: 0.90em;
line-height: 0.90em;
font-weight: normal;
}

JavaScript

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).on("click",function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            wrapper.append('<div><input class="dyn" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });
    wrapper.on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

$(".peek").click(function(){
    var vals = $(".dyn").map(function(){ return this.value}).get()
    alert (vals)
    
})