We Keep Coding

How to delete last object of an input array?

I created a dynamic form which adds 3 new input fields if the user clicks a button. However, my delete button deletes the first added fields, which I don't want. How can I delete the last added input fields?
Below is my code for adding and deleting the fields.
$(document).ready(function () {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 0; //initial count
$(add_button).click(function (e) {
e.preventDefault();
x++;
$(wrapper).append('<div id="names">Name: <input type="text" name="names[]"/></div>');
$(wrapper).append('<div id="ages">Age: <input type="text" name="ages[]"/></div>');
$(wrapper).append('<div id="numbers">Number: <input type="text" name="numbers[]"/><br><br></div></div>');
});
$(wrapper).on("click", ".remove_person", function (e) {
e.preventDefault();
if(x > 0) {
$("#names").remove();
$("#ages").remove();
$("#numbers").remove();
x--;
}
})
});
Below is my code for the fields in the HTML.
<b>People:</b><br>
<div class="input_fields_wrap" id="input_fields_wrap">
<button class="add_field_button">ADD</button>
<button id="remove_person" class="remove_person">REMOVE</button>
<br>
</div>

Firstly, You're using duplicate id's. please use class names instead.
use the jquery's last function like below
$(document).ready(function () {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 0; //initial count
$(add_button).click(function (e) {
e.preventDefault();
x++;
$(wrapper).append('<div class="names">Name: <input type="text" name="names[]"/></div>');
$(wrapper).append('<div class="ages">Age: <input type="text" name="ages[]"/></div>');
$(wrapper).append('<div class="numbers">Number: <input type="text" name="numbers[]"/><br><br></div></div>');
});
$(wrapper).on("click", ".remove_person", function (e) {
e.preventDefault();
if(x > 0) {
$(".names").last().remove();
$(".ages").last().remove();
$(".numbers").last().remove();
x--;
}
})
});

An alternative to using class and .last() is to put the button into the person wrapper
To delete, use closest to remove the wrapper the button is in (so have a wrapper for each person)
$(document).ready(function () {
var x = 0; //initial count
$(".add_field_button").on("click",function (e) {
var $pWrapper = $('<div/>').addClass("person"); //Fields wrapper
e.preventDefault();
x++;
$pWrapper.append('<button type="button" class="remove_person">REMOVE</button>')
.append('<div class="names">Name: <input type="text" name="names[]"/></div>')
.append('<div class="ages">Age: <input type="text" name="ages[]"/></div>')
.append('<div class="numbers">Number: <input type="text" name="numbers[]"/><br><br></div></div>')
.appendTo("#input_fields_wrap");
});
$("#input_fields_wrap").on("click", ".remove_person", function (e) {
e.preventDefault();
$(this).closest(".person").remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>People:</b><br>
<div class="input_fields_wrap" id="input_fields_wrap">
<button type="button" class="add_field_button">ADD</button>
<br>
</div>

Attaching Events To Dynamically Created Elements With Javascript

I add input dynamically and write event for this input. Event work, but all the second inputs are the same s. I want to do event for each other.
JavaScript:
$(document).ready(function() {
var max_fields = 4; //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) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input id="test" class="test" type="text" name="mytext[]"/>Remove<br><input id="test2" class="test2" type="text" name="mytext2[]"></div></div>'); //add input box
$(".test").on("input", function () {
$(this).closest('div').find('.test2').val($(this).val());
});
}
});
$(wrapper).on("click", ".remove_field", function (e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
$(".test").on("input", function () {
$(this).closest('div').find('.test2').val($(this).val());
});
});
HTML:
<div id="input_fields_wrap" class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input id="test" class="test" type="text" name="mytext[]"></div>
<div><input id="test2" class="test2" type="text" name="mytext2[]"></div>
</div>

may you need to see the demo as above...it works as you need..i maked some changes in class or jQuery...
$(document).ready(function() {
var max_fields = 4; //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) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input id="test" class="test dynamic" type="text" name="mytext[]"/>Remove<br><input id="test2" class="test2 dynamic" type="text" name="mytext2[]"></div></div>'); //add input box
$(".test").on("input", function() {
$(this).closest('div').find('.test2').val($(this).val());
});
// Your Event Code Put Here //
// It Find the all input and add event //
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
$(".test").on("input", function() {
$(this).closest('div').find('.test2').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input_fields_wrap" class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
<input id="test" class="test" type="text" name="mytext[]"/>
<bR/>
<input id="test2" class="test2" type="text" name="mytext2[]"/>
</div>
</div>

You can add a class to all your dynamically created elements and then attach an event listener to the class before the event is actually created in the following manner:
Assuming the class you'll be giving is dynamic:
$(document).on('event','.dynamic',function(){
console.log($(this));
});
UPDATE:
$(document).on('input','.dynamic',function(){
console.log("Typing in input 1");
});
$(document).on('input','.dynamic2',function(){
console.log("Typing in input 2");
});
$(document).ready(function() {
var max_fields = 4; //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) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input id="test" class="dynamic" type="text" name="mytext[]"/>Remove<div><input id="test2" class="dynamic2" type="text" name="mytext2[]"></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
And the HTML would be
<div id="input_fields_wrap" class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input id="test" class="dynamic" type="text" name="mytext[]"></div>
<div><input id="test2" class="dynamic" type="text" name="mytext2[]"></div>
</div>

jQuery first find the all tag and add event. so you can need to assign event after add field...
$(document).ready(function() {
var max_fields = 4; //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) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input id="test" class="test dynamic" type="text" name="mytext[]"/>Remove<div><input id="test2" class="test2 dynamic" type="text" name="mytext2[]"></div></div>'); //add input box
$('.dynamic').on('event',function(){
// Your Code
});
// Your Event Code Put Here //
// It Find the all input and add event //
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
$(".input_fields_wrap").on("input", "input", function() {
$(".input_fields_wrap .test2").val($(".input_fields_wrap .test").val());
});
});

Dynamicall add two form fileds to form

I want add fisrst name and last name fields dynamically to my form. Currenltly I managed to add one field. but how can I add two fields once.
Ex: fname lastname
fname lastname (X remove)
fname lastname (X remove)
(+ add)
my code
html
below is my html code ser
<div class="input_fields_wrap">
<div><input type="text" name="mytext[]"></div>
// I want to add another field with this
</div>
<button class="add_field_button">Add More Fields</button>
js
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>');
}
});
$(wrapper).on("click",".remove_field", function(e){ e.preventDefault(); $(this).parent('div').remove(); x--;
})
});

Well this will work for you:-
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var fname_lname = '<div>First Name:- <input type="text" name="fname"/>Last Name:- <input type="text" name="fname"/>Remove</div>'
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++; //text box increment
$(wrapper).append(fname_lname);
}
});
$(wrapper).on("click",".remove_field", function(e){ e.preventDefault(); $(this).parent().remove(); x--;
})
});
checkout the fiddle
https://jsfiddle.net/dhruv1992/em1je2cu/

So first, I removed the hardcoded HTML from your javascript. Then, I moved that to a HIDDEN template element, and just loaded its inner HTML as my template element -- by doing this, I can create as many elements as I might want.
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function(e) {
// Here, I load the template's HTML
var myFullTemplate = $(".fields-template").html();
''
e.preventDefault();
if (x < max_fields) {
x++; //text box increment
$(wrapper).append(myFullTemplate);
} else {
$(".add_field_button").hide();
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
if ($(".add_field_button").is(":hidden")) {
$(".add_field_button").show();
}
})
});
.fields-template {
display: none;
}
label {
font-weight: bolder;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<div>
<input type="text" name="mytext[]">
</div>
// I want to add another field with this
</div>
<button class="add_field_button">Add More Fields</button>
<div class="fields-template">
<div>
<label for="fname">First name:</label>
<input type="text" name="fname[]" />
<label for="lname">Last name:</label>
<input type="text" name="lname[]" />Remove
</div>
</div>
So, to do what you mention in your comment (remove both fields rather than one), simply edit your HTML template to suit your needs. Also, another change: when you hit your max number of items, the add button is hidden (and when you delete one, it shows again).

Add/Remove select using jQuery

I built this code in order add and remove select thanks to button but when i click on it, nothing happen.
UPDATE :
My HTML :
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
<select class="form-control" name="competence" id="competence">
<?php foreach ($resDisplayCompetence as $ligne) { ?>
<option value="<?php echo $ligne['id'] ?>"><?php echo $ligne['name'] ?></option>
<?php } ?>
</select>
My jQuery :
$(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(
'<select class="form-control" name="competence" id="competence"><option value="">test</option></select>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
I wanted to know if it is possible to add dynamic select using PHP with this jQuery code.

Found this article at https://www.safaribooksonline.com/library/view/jquery-cookbook/9780596806941/ch10s07.html, which might help you with your issue.
HTML:
<label for="form-control">Form Control</label>
<select class="form-control" name="competence" id="competence">
<option>Option 1</option>
</select>
<br>
<br>
<button id="remove">Remove</button>
<br>
<br>
<label for="newFieldName">New Select</label>
<input id="newFieldName" type="text" />
<label for="newFieldValue">Value</label>
<input id="newFieldValue" type="text" />
<button id="add">Add</button>
jQuery:
// find the "Add New" button
$('#add').click(function(event){
event.preventDefault();
//could be static values
var optionName = $('#newFieldName').val();
var optionValue = $('#newFieldValue').val();
$('<option/>').attr('value',optionValue).text(optionName).appendTo('#competence');
});
// find the "Remove Selected" button
$('#remove').click(function(event){
event.preventDefault();
var $select = $('#competence');
$('option:selected',$select).remove();
});
jsFiddle - https://jsfiddle.net/0d83L0q8/

I think what you are looking for is
$(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 $select = $('#competence');
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
$select.clone().removeAttr('id').appendTo(wrapper.find('div'));
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
if (x > 1) {
x--;
wrapper.find('select:not(#competence)').last().remove();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<button class="remove_field">Remove More Fields</button>
<div>
<select class="form-control" name="competence" id="competence">
<option value="">test</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>

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