How to add input on button click and create the new append a remove button to remove the new input?

Question

How to add input fields on button click where this is the answer given i would like to add this to my form which this scenario

Here my snippet code

 $('.add1').on('click', add); $('.remove1').on('click','.remove1', remove); function add() { var new_chq_no = parseInt($('#total_chq').val()) + 1; var new_input = "<input type='text' id='new_" + new_chq_no + "'><input class='remove1' id='newbutton" + new_chq_no + "' type='button' value='x'>"; $('#new_chq').append(new_input); $('#total_chq').val(new_chq_no); } function remove() { var last_chq_no = $('#total_chq').val(); if (last_chq_no > 1) { $('#new_' + last_chq_no).remove(); $('#total_chq').val(last_chq_no - 1); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group row"> <label for="contact" class="col-2 col-form-label">Contact Name:</label> <div class="col-4" id="contactContainername"> <div class="flex contactname" style="margin-bottom:10px;"> <input style="margin-right: 10px; width: 200px;" id="validationcontactname" name="contactname" type="text" class="form-control" placeholder="Name" required> <input style="border-radius: 5px;" type="button" class="add1 btn-primary" value="Add More Field" style="cursor: pointer;"> <input type="button" class="remove1" value="x"><label style="cursor: pointer; padding-top: 5px;"> <i style="width: 20px; height: 20px; color: lightseagreen;"data-feather="x"></i></label></span> </div> </div> </div> <div class="form-group row"> <label for="contact" class="col-2 col-form-label"></label> <div class="col-4" id="contactContainername"> <div id="new_chq" class="flex contactname" style="margin-bottom:10px;"> <input type="hidden" value="1" id="total_chq" style="margin-right: 10px; width: 200px;" name="contactname" class="form-control" placeholder="Name" required> </div> </div> </div>

I would like that when press more fields a new input appear with the button x where u are able to click and remove the new input Here the image of what i mean

How can i do it?

Answer 1

You could do one of two things either change your on click to search for your class everytime you click or attach an clicklistener to your element to change your onclick you could do

$('body').on('click','.remove1', remove);

or to attach to your element

 var new_input = $("<input type='text' id='new_" + new_chq_no + "'><input class='remove1' id='newbutton" + new_chq_no + "' type='button' value='x'>");
new_input.on('click',remove)

But to get your code running correctly you have to fix your remove function aswell, here's an example of how it could look

$('.add1').on('click', add);
$('body').on('click','.remove1', remove);

function add() {
  var new_chq_no = parseInt($('#total_chq').val()) + 1;
  var new_input = "<label><input type='text' id='new_" + new_chq_no + "'><input class='remove1' id='newbutton" + new_chq_no + "' type='button' value='x'></label>";

  $('#new_chq').append(new_input);

  $('#total_chq').val(new_chq_no);
}

function remove() {
  var last_chq_no = $('#total_chq').val();
    $(this).closest('label').remove()
  $('#total_chq' + '.remove1').val(last_chq_no - 1);
  
}