Dynamically adding input fields with a button, without remove button on the only field

Question

I am trying to use the code from this jsfiddle to dynamically load more fields into the form:

$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
$('.multi-field .remove-field', $wrapper).click(function() {
    if ($('.multi-field', $wrapper).length > 1)
        $(this).parent('.multi-field').remove();
    });
});

Everything works great, but the problem is that the "remove" button stays there when there is only one field.

I want to make it look like this when there is only one field. The javascript uses clone function. If I remove the remove button, it gets removed from all the subsequent "clones" when more fields are added. I am very new to javascript. Does anyone have an advice on how to remove the "remove" button when there is only one field instance?

learn about [event delegation](http://learn.jquery.com/events/event-delegation/) method. — Bhojendra Rauniyar, Apr 20 '16 at 11:28
Possible duplicate of [Click event doesn't work on dynamically generated elements](http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements) — Bhojendra Rauniyar, Apr 20 '16 at 11:30
@BhojendraNepal the problem wasn't that the "remove" button didn't work, it was just unnecessary with the only field on the page — Arthur Tarasov, Apr 20 '16 at 11:54

score 2 · Answer 1 · answered Apr 20 '16 at 11:51

you can just hide the button "remove" using css

css code:

 .multi-field:first-child  .remove-field {
      display: none;
 }

or you can do it with js, for this you need to change you code in such a way:

$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
            var $el = $('.multi-field:first-child', $wrapper).clone(true);
        var $removeButton = $('<button type="button" class="remove-field">Remove</button>');
        $removeButton.click(function() {
          if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
            });
        $el.append($removeButton);
            $el.appendTo($wrapper).find('input').val('').focus();
    });
});

jsfiddle

here is copied element "input", then create an element of "button" which is hung click handler, then the button is added to the element "input"

score 1 · Answer 2 · answered Apr 20 '16 at 11:35

I updated the fiddle. http://jsfiddle.net/hMJEy/1932/

$('.multi-field-wrapper').each(function() {

    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
    $('.remove-field').show();
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1){
            $(this).parent('.multi-field').remove();
            if($('.multi-field', $wrapper).length == 1)
            {$('.remove-field').hide();}

            }
            else{}
    });
});

score 1 · Answer 3 · answered Apr 20 '16 at 11:39

You can try this:

$('.multi-field-wrapper').each(function() {
  var $wrapper = $('.multi-fields', this);

  // New code
  if ($('.multi-field').length < 2)
    $('.remove-field', $wrapper).hide();
  else
    $('.remove-field', $wrapper).show();

  $(".add-field", $(this)).click(function(e) {
    $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();

    // New code
    $('.remove-field', $wrapper).show();
  });

  $('.multi-field .remove-field', $wrapper).click(function() {
    if ($('.multi-field', $wrapper).length > 1)
      $(this).parent('.multi-field').remove();

    // New code
    if ($('.multi-field').length < 2)
      $('.remove-field', $wrapper).hide();
    else
      $('.remove-field', $wrapper).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" action="/wohoo" method="POST">
  <label>Stuff</label>
  <div class="multi-field-wrapper">
    <div class="multi-fields">
      <div class="multi-field">
        <input type="text" name="stuff[]">
        <button type="button" class="remove-field">Remove</button>
      </div>
    </div>
    <button type="button" class="add-field">Add field</button>
  </div>
</form>

score 1 · Accepted Answer · answered Apr 20 '16 at 11:39

Check out this simple solution which doesn't remove the button but adjusts visibility. Depending on your application, that might be enough:

http://jsfiddle.net/hMJEy/1933/

$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
        $('.multi-field .remove-field', $wrapper).show();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1) {
            $(this).parent('.multi-field').remove();
        }
        adjustButtonVisiblity();
    });

    adjustButtonVisiblity();
    function adjustButtonVisiblity() {
        if ($('.multi-field', $wrapper).length == 1) {
              $('.multi-field .remove-field', $wrapper).hide();
        }
    }
});

Perfect! I've been trying to `append()` the whole input field block as an alternative solution but hiding button is definitely more elegant and easier — Arthur Tarasov, Apr 20 '16 at 11:51

score 1 · Answer 5 · answered Apr 20 '16 at 11:43

You can use a simple logic to hide/show the remove button like

$(".multi-field-wrapper .add-field").click(function(e) {
  var $wrapper = $(this).prev('.multi-fields'); //or $(this).closest('.multi-field-wrapper').find('.multi-fields');
  $wrapper.find('.multi-field:first-child').clone(true).appendTo($wrapper).find('input').val('').focus();
  $wrapper.find('.remove-field.hidden').removeClass('hidden');
});

$('.multi-field-wrapper').on('click', '.remove-field', function() {
  var $this = $(this),
    $field = $this.closest('.multi-field'),
    $others = $field.siblings('.multi-field');
  $field.remove();
  $others.find('.remove-field').toggleClass('hidden', $others.length == 1);
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" action="/wohoo" method="POST">
  <label>Stuff</label>
  <div class="multi-field-wrapper">
    <div class="multi-fields">
      <div class="multi-field">
        <input type="text" name="stuff[]">
        <button type="button" class="remove-field hidden">Remove</button>
      </div>
    </div>
    <button type="button" class="add-field">Add field</button>
  </div>
</form>

score 1 · Answer 6 · answered Apr 20 '16 at 11:44

1

working fiddle

i think its meet your requirment

http://jsfiddle.net/hMJEy/1934/

answered Apr 20 '16 at 11:44

krishna

508
2
8

Dynamically adding input fields with a button, without remove button on the only field

6 Answers6