We Keep Coding

adding input fields dynamically Jquery

I'm building this form were the user can add input field dynamically by clicking the + sign.
Then the user can remove the previously added input by clicking the - sign.
My problem is when the user removes one field, all fields are removed. I believe it depends on the position of the .field_wrapper.
I've moved the .field_wrapper to various positions but nothing seems to work. Either way the previously added input is not removed or all inputs are removed.
Can someone advise me on what I'm missing.
here is a link to a fiddle
$(document).ready(function() {
var max_fields = 10;
var add_input_button = $('.add_input_button');
var field_wrapper = $('.field_wrapper');
var new_field_html = '<input name="title[]" class="form-control form-item type="text" value="" data-label="title" />-';
var input_count = 1;
//add inputs
$(add_input_button).click(function() {
if (input_count < max_fields) {
input_count++;
$(field_wrapper).append(new_field_html);
}
});
//remove_input
$(field_wrapper).on('click', '.remove_input_button', function(e) {
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class="row field_wrapper">
<label class="col-md-offset-1 col-sm-3 control-label" for="title">Title</label>
<div class="col-md-6 col-sm-9 col-10">
<input id="title" class="form-control form-item required" name="input_title[]" type="text" value="" data-label="title" />
+
</div>
</div>
</form>

The reason is because the parent('div') from the remove button is the div which holds all the content. The simple way to fix this would be to wrap the new input and remove link in its own div.
Also note that add_input_button and field_wrapper already contain jQuery objects, so you don't need to wrap them again. Try this:
$(document).ready(function() {
var max_fields = 10;
var $add_input_button = $('.add_input_button');
var $field_wrapper = $('.field_wrapper');
var new_field_html = '<div><input name="title[]" class="form-control form-item type="text" value="" data-label="title" />-</div>';
var input_count = 1;
//add inputs
$add_input_button.click(function() {
if (input_count < max_fields) {
input_count++;
$field_wrapper.append(new_field_html);
}
});
//remove_input
$field_wrapper.on('click', '.remove_input_button', function(e) {
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class="row field_wrapper">
<label class="col-md-offset-1 col-sm-3 control-label" for="title">Title</label>
<div class="col-md-6 col-sm-9 col-10">
<input id="title" class="form-control form-item required" name="input_title[]" type="text" value="" data-label="title" />
+
</div>
</div>
</form>

At least two inputs should be selected before submit

If no checkbox is selected, the form doesn't allow sending.
I would like to create a rule like this for boxes. At least two boxes must be filled. Otherwise, the form should not be allowed to be sent.
Below is the code structure.
on JSfiddle
$(document).ready(function() {
var max_fields = 32; //maximum input boxes allowed
var wrapper = $(".cameras"); //Fields wrapper
var add_button = $(".add-camera"); //Add button ID
var x = 1; //initlal text box count
$(add_button).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 class="control-group input-group"><div class="input-group mb-3"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" name="corrects[]" value="' + x + '" aria-label="Checkbox for following text input"></div></div><input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox"><div class="input-group-btn"><button class="btn btn-danger remove-camera" type="button"> Remove</button></div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove-camera", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
})
$('#submit-btn').click(() => {
const x = document.querySelector('.cameras').querySelectorAll('input[type="text"]')
const checkedInputs = Array.from(x).filter(input => input.valueOf()).length
if (checkedInputs < 2) {
alert('at least 2 inpouts must be filled')
return;
}
const xd = document.querySelector('.cameras').querySelectorAll('input[type="checkbox"]')
const checkedBoxes = Array.from(xd).filter(input => input.checked).length
if (checkedBoxes < 1) {
alert('at least one checkbox must be checked')
return;
}
alert(`you checked ${checkedBoxes} checkboxes`)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cameras">
<div class="camera-field">
<button type="button" class="add-camera btn btn-primary">+ Add Camera
</button>
</div>
<div class="control-group input-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="corrects[]" value="1" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox">
<div class="input-group-btn">
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4">
<button type="submit" class="btn btn-primary" id="submit-btn">submit</button>
<div class="mt-2">
</div>
</div>

You need to change your conditions
input.valueOf() should be input.value
checkbox < 1 to checkbox < 2
$(document).ready(function() {
var max_fields = 32; //maximum input boxes allowed
var wrapper = $(".cameras"); //Fields wrapper
var add_button = $(".add-camera"); //Add button ID
var x = 1; //initlal text box count
$(add_button).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 class="control-group input-group"><div class="input-group mb-3"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" name="corrects[]" value="' + x + '" aria-label="Checkbox for following text input"></div></div><input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox"><div class="input-group-btn"><button class="btn btn-danger remove-camera" type="button"> Remove</button></div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove-camera", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
})
$('#submit-btn').click(() => {
const x = document.querySelector('.cameras').querySelectorAll('input[type="text"]')
const checkedInputs = Array.from(x).filter(input => input.value).length
if (checkedInputs < 2) {
alert('at least 2 inpouts must be filled')
return;
}
const xd = document.querySelector('.cameras').querySelectorAll('input[type="checkbox"]')
const checkedBoxes = Array.from(xd).filter(input => input.checked).length
if (checkedBoxes < 2) {
alert('at least two checkbox must be checked')
return;
}
alert(`you checked ${checkedBoxes} checkboxes`)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cameras">
<div class="camera-field">
<button type="button" class="add-camera btn btn-primary">+ Add Camera
</button>
</div>
<div class="control-group input-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="corrects[]" value="1" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox">
<div class="input-group-btn">
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4">
<button type="submit" class="btn btn-primary" id="submit-btn">submit</button>
<div class="mt-2">
</div>
</div>

Add or Remove form text field and labels dynamically

I found a code here to add form text fields dynamically. However, I needed to add the label to the text field and each time a new text field is added, the label also changes value, for example, increment by one. I have managed to add the labels but my main problem is:
1. How to get the label increment by one every time a new field and label are added
2. Be able to remove the label as well when the text field is removed.
I am new to Javascript so a detailed explanation would so welcome.
Javascript code:
<script type="text/javascript">
$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var y = 2;
var labelHTML = '<label for="inputEmail3" class="col-md-4 control-label">'+ $y + '</label>';
var fieldHTML = '<div class="col-md-6"><input type="text" name="field_name[]" value=""/><img src="remove-icon.png"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(labelHTML, fieldHTML); // Add field html
y++;
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>
HTML Code:
<fieldset>
<legend>Question Options:</legend>
<div class="field_wrapper form-group">
<label for="inputEmail3" class="col-md-4 control-label">1</label>
<div class="col-md-6">
<input type="text" name="field_name[]" value=""/>
<img src="add-icon.png"/>
</div>
</div>
</fieldset>

First of all you need to define your html inside your add function to make them unique to each other.
Second you need to remove the label before you remove the input field and his parent div.
$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var y = 2;
var x = 1; //Initial field counter is 1
var labelHTML = "";
var fieldHTML = "";
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
labelHTML = '<label for="inputEmail' + x + '" class="col-md-4 control-label">'+ 'test' + '</label>';
fieldHTML = '<div class="col-md-6"><input id="inputEmail' + x + '" type="text" name="field_name[]" value=""/><img src="remove-icon.png"/></div>'; //New input field html
x++; //Increment field counter
$(wrapper).append(labelHTML, fieldHTML); // Add field html
y++;
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').prev().remove(); //Remove previous field html
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<legend>Question Options:</legend>
<div class="field_wrapper form-group">
<label for="inputEmail" class="col-md-4 control-label">1</label>
<div class="col-md-6">
<input id="inputEmail" type="text" name="field_name[]" value=""/>
<img src="add-icon.png"/>
</div>
</div>
</fieldset>

Adding removing input fields using jQuery

I am adding input field on clicking the button and at the same time giving remove button to remove the input field.However my remove button is not removing the input field instead it takes me to top of page...
<div class="input_fields_wrap">
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
<button class="add_field_button">Add More Locations</button>
</div>
</div>
and below is the jQuery to add more textbox when I click the button
<script>
$(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).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 class="form-group"><label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label><div class="col-md-3"> <input type="text" id="loc" name="Work_Location[]" class="form-control" ></div>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>

I have an example for you, you can do it easier
function closeMe(element) {
$(element).parent().remove();
}
function addMore() {
var container = $('#list');
var item = container.find('.default').clone();
item.removeClass('default');
//add anything you like to item, ex: item.addClass('abc')....
item.appendTo(container).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="list">
<li class="default" style="display: none;">
<input type="text" /><span style="cursor: pointer;" onclick="closeMe(this);">close</span>
</li>
</ul>
<button onclick="addMore();">Add</button>

Also you can use this:
$(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).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 type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
Hope this is helpful for you
Thanks

$(document).ready(function() {
var max = 10;
var wrp= $(".input_fields_wrap");
var addBtn = $(".add_field_button");
var x = 1;
$(addBtn ).click(function(e){
e.preventDefault();
if(x < max){
x++;
$(wrp).append('<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
Remove</div>');
}
});
$(wrp).on("click",".remove_field", function(e){ /
e.preventDefault();
$(this).parent('div').remove(); x--;
})
});

bootstrap 3: position absolute not work with form-control class

I work With Bootstrap 3 and jQuery For Add input field.
HTML:
<div style="padding:30px;" class="form-group">
<label for="files" class="col-lg-1 control-label">form</label>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-6">
<div class="input-group input-group-md"> <span class="input-group-addon"><a class="help-box" rel="popover" data-placement="top" data-original-title="123" data-content=""><i class="fa fa-file-text"></i></a></span>
<div id="InputsWrapper">
<input id="docs" class="form-control" type="text" name="files[]" placeholder="">
</div>
</div>
</div><a style="float:right" href="#" id="AddMoreFileBox" class="fa fa-plus fa-2x margin-top-8">Add New Field</a>
</div>
</div>
</div>
JS:
$(document).ready(function () {
var MaxInputs = 8; //maximum input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount = 1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if (x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).append('<div style="position:relative;"><input class="form-control" type="text" name="mytext[]" id="field" value="Text ' + FieldCount + '"/>×</div>');
x++; //text box increment
}
return false;
});
$("body").on("click", ".removeclass", function (e) { //user click on remove text
if (x > 1) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
}
return false;
})
});
I add remove input field link (a href="#" class="removeclass" style="position:absolute;right:0px;">×</a>) with position:absolute. now when click in add new field bootstrap 3 not show remove link.
I found this problem: if we remove class="form-control" from($(InputsWrapper).append) text input remove link show and worked But when add class="form-control" remove link not show for each input field!!
how do fix this problem?
Problem:
Not Worked DEMO : http://jsfiddle.net/K7jQ7/4/
Worked Demo Without form-control : http://jsfiddle.net/K7jQ7/2/

here is js fiddle for you
http://jsfiddle.net/pragneshok/K7jQ7/1/
HTML CODE
<div style="padding:30px;" class="form-group">
<label for="files" class="col-lg-1 control-label">form</label>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-6" id="cnt">
<div class="input-group input-group-md"> <span class="input-group-addon"><a class="help-box" rel="popover" data-placement="top" data-original-title="123" data-content=""><i class="fa fa-file-text"></i></a></span>
<div id="InputsWrapper">
<input id="docs" onclick="openKCFinder(this)" class="form-control" type="text" name="files[]" placeholder="">
</div>
</div>
</div><a style="float:right" href="#" id="AddMoreFileBox" class="fa fa-plus fa-2x margin-top-8">Add New Field</a>
</div>
</div>
</div>
jQuery code :
$(document).ready(function () {
var MaxInputs = 8; //maximum input boxes allowed
var InputsWrapper = $("#cnt"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount = 1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if (x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).append('<div class="input-group input-group-md"> <span class="input-group-addon"><a data-content="" data-original-title="123" data-placement="top" rel="popover" class="help-box"><i class="fa fa-file-text"></i></a></span><div id="InputsWrapper"><input type="text" placeholder="" name="files[]" class="form-control" onclick="openKCFinder(this)" id="docs"></div></div>');
x++; //text box increment
}
return false;
});
$("body").on("click", ".removeclass", function (e) { //user click on remove text
if (x > 1) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
}
return false;
})
});
UPDATED FIDDLE
http://jsfiddle.net/pragneshok/K7jQ7/3/
New updated fiddle
http://jsfiddle.net/pragneshok/K7jQ7/5/