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?

Possible duplicate of Click event doesn't work on dynamically generated elements — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Apr 20, 2016 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
– Arthur Tarasov, Commented Apr 20, 2016 at 11:54

Boris Chernysh · Accepted Answer · 2016-04-20 11:51:23Z

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"

DrinkBird · Accepted Answer · 2016-04-20 11:39:31Z

1

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

answered Apr 20, 2016 at 11:39

DrinkBird

8348 silver badges17 bronze badges

1 Comment

Arthur Tarasov Over a year ago

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

or hor · Accepted Answer · 2016-04-20 11:35:14Z

1

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

answered Apr 20, 2016 at 11:35

or hor

7233 silver badges11 bronze badges

Comments

KiiroSora09 · Accepted Answer · 2016-04-20 11:39:24Z

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>

Arun P Johny · Accepted Answer · 2016-04-20 11:43:01Z

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>

krishna · Accepted Answer · 2016-04-20 11:44:53Z

1

working fiddle

i think its meet your requirment

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

answered Apr 20, 2016 at 11:44

krishna

5182 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related