Create dynamic input in jQuery

Question

I have the code below - it's working fine. Input was created dynamically. I have problem with remove my dynamic created input.

When I click button remove button, my input is not deleted.

var maxField = 10;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var fieldHTML = '<div class="row"><div class="col-lg-6"><div class="form-group"><span class="form-label formMargin">Imię i  nazwisko</span><input class="form-control phone" type="text" name="child_name[]" placeholder=""></div></div><div class="col-lg-5"><div class="form-group"><span class="form-label formMargin">Data urodzenia</span><input class="form-control dateMask date" type="text" name="child_date[]" placeholder="0000-00-00"></div></div><div class="col-lg-1 d-flex align-items-center justify-content-center"><a href="javascript:void(0);" class="align-self-center remove_button">remove</a></div></div>';

var x = 1;

$(addButton).click(function() {
  if (x < maxField) {
    x++;
    $(wrapper).append(fieldHTML);
  }
});

$(wrapper).on('click', '.remove_button', function(e) {
  e.preventDefault();
  $(this).parent('div').remove();
  x--;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field_wrapper">
  <div class="row">
    <div class="col-lg-6">
      <div class="form-group">
        <span class="form-label formMargin">Imię i  nazwisko</span>
        <input class="form-control phone" type="text" name="child_name[]" placeholder="">
      </div>
    </div>

    <div class="col-lg-5">
      <div class="form-group">
        <span class="form-label formMargin">Data urodzenia</span>
        <input class="form-control dateMask date" type="text" name="child_date[]" placeholder="0000-00-00">
      </div>
    </div>
    <div class="col-lg-1 d-flex align-items-center justify-content-center">
      <a href="javascript:void(0);" class="align-self-center add_button">add</a>
    </div>
  </div>
</div>

How can I repair it? I am beginner webdeveloper.

Please help me

Can you update the question to a runnable code snippet to demonstrate? — David, Aug 27 '20 at 15:31
Not related to the question: you can remove the global `x` variable: `if ($(".remove_button").length < maxField)` - might need to adjust maxField or use `(maxField-1)` — freedomn-m, Aug 27 '20 at 16:09

score 2 · Accepted Answer · edited Aug 27 '20 at 16:07

Replace

$(this).parent('div').remove();

with

$(this).closest('.row').remove();

Updated Snippet

var maxField = 10;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var fieldHTML = '<div class="row"><div class="col-lg-6"><div class="form-group"><span class="form-label formMargin">Imię i  nazwisko</span><input class="form-control phone" type="text" name="child_name[]" placeholder=""></div></div><div class="col-lg-5"><div class="form-group"><span class="form-label formMargin">Data urodzenia</span><input class="form-control dateMask date" type="text" name="child_date[]" placeholder="0000-00-00"></div></div><div class="col-lg-1 d-flex align-items-center justify-content-center"><a href="javascript:void(0);" class="align-self-center remove_button"><i class="fa fa-minus" aria-hidden="true"></i></a></div></div>';
var x = 1;

$(addButton).click(function() {
  if (x < maxField) {
    x++;
    $(wrapper).append(fieldHTML);
  }
});
$(wrapper).on('click', '.remove_button', function(e) {
  e.preventDefault();
  $(this).closest('.row').remove();
  x--;
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="field_wrapper">
  <div class="row">
    <div class="col-lg-6">
      <div class="form-group">
        <span class="form-label formMargin">Imię i  nazwisko</span>
        <input class="form-control phone" type="text" name="child_name[]" placeholder="">
      </div>
    </div>

    <div class="col-lg-5">
      <div class="form-group">
        <span class="form-label formMargin">Data urodzenia</span>
        <input class="form-control dateMask date" type="text" name="child_date[]" placeholder="0000-00-00">
      </div>
    </div>
    <div class="col-lg-1 d-flex align-items-center justify-content-center">
      <a href="javascript:void(0);" class="align-self-center add_button"><i
                                                            class="fa fa-plus" aria-hidden="true"></i></a>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

score 0 · Answer 2 · answered Aug 27 '20 at 15:43

Because remove button element are added dynamically using append. Then the event handler that attached before the element are added will not be functioning.

here might help:

var maxField = 10;
            var addButton = $('.add_button');
            var wrapper = $('.field_wrapper');
            var fieldHTML = '<div class="row"><div class="col-lg-6"><div class="form-group"><span class="form-label formMargin">Imię i  nazwisko</span><input class="form-control phone" type="text" name="child_name[]" placeholder=""></div></div><div class="col-lg-5"><div class="form-group"><span class="form-label formMargin">Data urodzenia</span><input class="form-control dateMask date" type="text" name="child_date[]" placeholder="0000-00-00"></div></div><div class="col-lg-1 d-flex align-items-center justify-content-center"><a href="javascript:void(0);" class="align-self-center remove_button"><i class="fa fa-minus" aria-hidden="true"></i></a></div></div>';
            var x = 1;

                            var attachRemoveButtonEventHandler = function() {
                $(wrapper).find('.remove_button').off('click').on('click', function(e) {
                                  e.preventDefault();
                $(this).parent('div').remove();
                x--;
              })
            }
            
            $(addButton).click(function () {
                if (x < maxField) {
                    x++;
                    $(wrapper).append(fieldHTML);
                    attachRemoveButtonEventHandler();
                }
            });

OP is already using event delegation: `$(wrapper).on('click', '.remove_button',` - OPs button is deleted (just not the inputs) so the event handler on dynamically added events is already working. Related / worth a read: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Aug 27 '20 at 16:06

Create dynamic input in jQuery

2 Answers2