We Keep Coding

Remove Div from jquery when checkbox is clicked

I have to implement the logic when add button is clicked,it will add the input field and when remove button is clicked it removes the fields, For this requirement code is working fien,but when i add checkbox ,if checkbox is clicked the requirement is that input field should be disabled and all new input fields will be removed,in my case only one input filed removes,i have to remove all fields.
var maxField = 5; //Input fields increment limitation
var add_button = $('#add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div id="fieldhtml"><input type="text" name="socials[]" value="" />
<img src="{{ 'remove-icon.png' | asset_url }}"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
<div class="col-lg-6 col-sm-12">
<div class="input-icons pt-2">
<label for="socials">Socials <span class='req'>*</span></label>
<div class="input-icon">
<i class="plus"></i>
<div class="icon"></div>
<div class="field_wrapper">
<input type="text" class="validate input-field validate-input-structure" data-input-type="text" name="socials[]" value="" id="socials" required />
</div>
<label for="chksocials">
<input type="checkbox" id="chksocials" name="chksocials" />
My business doesn’t have social media
</label>
</div>
</div>
</div>
$(function(){
//Once add button is clicked
$(add_button).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
$("#chksocials").click(function () {
if ($(this).is(":checked")) {
$("#add_button").attr("disabled", "disabled");
$("#socials").attr("disabled", "disabled");
$("#fieldhtml").remove();
} else {
$("#socials").removeAttr("disabled");
$("#fieldHTML").removeAttr("disabled");
$("#add_button").removeAttr("disabled");
//$("#fieldhtml").parent('div').show();
$("#socials").focus();
}
});

You need to define the fieldHTML based on the Jquery Documentation.
// HTML
<div class="col-lg-6 col-sm-12">
<div class="input-icons pt-2">
<label for="socials">Socials <span class='req'>*</span></label>
<div class="input-icon">
<a href="" class="add-button" title="Add field" id="add_button">
ADD
</a>
<div class="icon"></div>
<div class="field_wrapper">
<input type="text" class="validate input-field validate-input-structure socials" data-input-type="text" name="socials[]" value="" required />
</div>
<label for="chksocials">
<input type="checkbox" id="chksocials" name="chksocials" />
My business doesn’t have social media
</label>
</div>
</div>
</div>
// JS
const add_button = $('#add_button');
const wrapper = $('.field_wrapper');
$(function(){
const maxField = 5;
let x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < maxField){
x++;
// This is to create element in JQUERY
const fieldHTML = $('<div class="fieldhtml"><input type="text" name="socials[]" value="" />REMOVE</div>');
$(wrapper).append(fieldHTML);
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
$("#chksocials").click(function () {
if ($(this).is(":checked")) {
wrapper.hide();
} else {
wrapper.show();
$(".socials").focus();
}
});
});
Note : do not use the same HTML ID multiple times, see here.

eventlistener not working for dynamically created element [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed last year.
I have a simple section in which users can add input fields dynamically and users should be able to remove added input fields by clicking the delete button. am using vanilla js
here is a live demo : demo live codepen
HTML
<div id="domains-wrapper">
<div class="input-group">
<input name="domains" type="text" class="form-control domain-url" placeholder="Type valid url" value="" required="">
<div class="valid-feedback">Looks good!</div>
<button id="default-delete" style="display: none;" class="default-delete delete-input-el domain-btn btn-sm border border-1" type="button">
</button>
<button id="default-add" class="add-input-el added-input plus-button btn-sm border border-1 add_form_field" type="button">
<span class="add-icon">+
</span>
</button>
</div>
</div>
Js
var max_fields = 10;
var wrapper = document.getElementById("domains-wrapper");
var add_button = document.getElementById("default-add");
var x = 1;
add_button.addEventListener('click', function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><input id="delete" type="text" name="mytext[]"/>Delete</div>'); //add input box
} else {
alert('You Reached the limits')
}
})
var deleteBtn = document.querySelectorAll(".delete");
deleteBtn.forEach(function(e) {
e.addEventListener('click', function() {
console.log('PL')
this.parentNode.remove(); //remove the whole div containing input and delete button
})
});
Problem, Now when I click the delete button nothing is happening,
Any idea what am I missing here?

your are not recovering the .delete to add listener after the click on more button
so delete field don't have listener
I can propose you to add the listener after the field append to solve your situation
var max_fields = 10;
var wrapper = document.getElementById("domains-wrapper");
var add_button = document.getElementById("default-add");
var x = 1;
add_button.addEventListener('click', function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
var deleteField = document.createElement('div');
deleteField.insertAdjacentHTML('beforeend', '<input id="delete" type="text" name="mytext[]"/>');
var a = document.createElement('a');
a.href= '#';
a.innerText = 'Delete';
a.classList.add('delete');
deleteField.append(a);
wrapper.appendChild(deleteField); //add input box
a.addEventListener('click', function() {
var target = e.target || e.srcElement;
console.log('PL')
deleteField.remove();
})
} else {
alert('You Reached the limits')
}
})
<div id="domains-wrapper">
<div class="input-group">
<input name="domains" type="text" class="form-control domain-url" placeholder="Type valid url" value="" required="">
<div class="valid-feedback">Looks good!</div>
<button id="default-delete" style="display: none;" class="default-delete delete-input-el domain-btn btn-sm border border-1" type="button">
</button>
<button id="default-add" class="add-input-el added-input plus-button btn-sm border border-1 add_form_field" type="button">
<span class="add-icon">+
</span>
</button>
</div>
</div>

rearrange the appended text input when remove button clicks

I have a add button. when i click on it it get append new input text with placeholder option A,B,C,D,E with a remove button each. when i click on remove button of c then it shows the order A,B,D,E. but i need to get arrange as A,BD replace with C,E replace with C .
<div class="form-group col-md-6 mb-2 input-group" id="optionList">
<input type="text" class="form-control" id="myopt" placeholder="Option A" name="myopt[]" required><br>
<button type="button" class="btn btn-icon rounded-circle btn-success glow mr-1 mb-1 add_field_button"><i class="bx bx-list-plus"></i></button>
</div>
var x = 1; //initlal text box count
var nex = 'A'.charCodeAt(0);
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
var curr = String.fromCharCode(nex+x++);
$(wrapper).append('<div class="input-group"><input type="text" class="form-control" id="myopt" placeholder="Option '+curr+'" name="myopt[]" required><button type="button" class="btn btn-icon rounded-circle btn-light-danger mr-1 mb-1 remove_field"><i class="bx bx-minus"></i></button><br></div>'); //add input box
}
});

You can add code like below on remove button click.
You delegate type biding with $(wrapper).on('click', '.remove_field', function(e) { so it will work for dynamically added button.
On click remove parent div.
Reset x & nex values.
Loop over all input except first inside wrapper and reset placeholder value.
$(wrapper).on('click', '.remove_field', function(e) {
e.preventDefault();
$(this).parent().remove();
x = 1;
nex = 'B'.charCodeAt(0);
$(wrapper).find('input[type=text]:not(:first)').each(function(i, item) {
x++; //text box increment
var curr = String.fromCharCode(nex++);
$(this).attr('placeholder', 'Option ' + curr);
})
});
Test it here.
var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#optionList"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
var nex = 'B'.charCodeAt(0);
$('.add-btn').click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
var curr = String.fromCharCode(nex++);
$(wrapper).append('<div class="input-group"><input type="text" class="form-control" id="myopt" placeholder="Option ' + curr + '" name="myopt[]" required><button type="button" class="btn btn-icon rounded-circle btn-light-danger mr-1 mb-1 remove_field"><i class="bx bx-minus"></i>Remove</button><br></div>'); //add input box
}
});
$(wrapper).on('click', '.remove_field', function(e) {
e.preventDefault();
$(this).parent().remove();
x = 1;
nex = 'B'.charCodeAt(0);
$(wrapper).find('input[type=text]:not(:first)').each(function(i, item) {
x++; //text box increment
var curr = String.fromCharCode(nex++);
$(this).attr('placeholder', 'Option ' + curr);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type='button' class='add-btn' value='add'>
<div class="form-group col-md-6 mb-2 input-group" id="optionList">
<input type="text" class="form-control" id="myopt" placeholder="Option A" name="myopt[]" required><br>
<button type="button" class="btn btn-icon rounded-circle btn-success glow mr-1 mb-1 add_field_button"><i class="bx bx-list-plus"></i></button>
</div>

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>

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