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
– David, Commented Aug 27, 2020 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) — fdomn-m
– fdomn-m, Commented Aug 27, 2020 at 16:09

fdomn-m · Accepted Answer · 2020-08-27 16:07:28Z

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>

Steven · Accepted Answer · 2020-08-27 15:43:02Z

0

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

answered Aug 27, 2020 at 15:43

Steven

1093 bronze badges

1 Comment

fdomn-m Over a year ago

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: stackoverflow.com/questions/203198/…

Collectives™ on Stack Overflow

Create dynamic input in jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related