Remove button for dynamic fields is not working

Question

I'm working on a form and I have a generated fields, the add button is working however the button for removing the selected fields is not working..

I tried to change the values of the script but still not working..

I hope you can help thanks a lot.

Here's my sample code

BOOTPLY

JS

$(function() {

  // Dynamically add/remove inputs for any field[]'s
  $('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    // Add button
    $(".add-field", $(this)).click(function(e) {
      $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    // Remove buttons
    $('.multi-field .remove-field', $wrapper).click(function() {
      if ($('.multi-field', $wrapper).length > 1)
        $(this).parent('.multi-field').remove();
    });
  });

});

HTML

<div class="multi-field-wrapper">
        <div class="multi-fields">
            <div class="multi-field">
                <div class="row">
                  <div class="col-md-2">
                  <input type="text" name="stuff1[]">
                </div>
                <div class="col-md-2">
                  <input type="text" name="stuff2[]">
                </div>
                <div class="col-md-2">
                  <input type="text" name="stuff3[]">
                </div>
                <div class="col-md-3">
                  <input type="text" name="stuff4[]">
                </div>
                <div class="col-md-2">
                  <button type="button" class="remove-field btn btn-danger">Remove</button>
                </div>
                </div>

                </div>
            </div>
            <button type="button" class="add-field btn btn-success">Add field</button>
        </div>

Answer 1

change $(this).parent('.multi-field').remove(); to $(this).parent().parent().remove();

Snippet below

$(function() {

  // Dynamically add/remove inputs for any field[]'s
  $('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    // Add button
    $(".add-field", $(this)).click(function(e) {
      $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    // Remove buttons
    $('.multi-field .remove-field', $wrapper).click(function() {
      if ($('.multi-field', $wrapper).length > 1)
        $(this).parents('.multi-field').remove();
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multi-field-wrapper">
        <div class="multi-fields">
            <div class="multi-field">
                <div class="row">
                  <div class="col-md-2">
                  <input type="text" name="stuff1[]">
                </div>
                <div class="col-md-2">
                  <input type="text" name="stuff2[]">
                </div>
                <div class="col-md-2">
                  <input type="text" name="stuff3[]">
                </div>
                <div class="col-md-3">
                  <input type="text" name="stuff4[]">
                </div>
                <div class="col-md-2">
                  <button type="button" class="remove-field btn btn-danger">Remove</button>
                </div>
                </div>

                </div>
            </div>
            <button type="button" class="add-field btn btn-success">Add field</button>
        </div>

Answer 2

.parent(".multi-field") should be .parents(".multi-field"). .parents is much more versatile then stringing together .parent()s'. .parents searches all the parent's dom for the selector given. And I think this was your original intent.

$(function() {

  // Dynamically add/remove inputs for any field[]'s
  $('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    // Add button
    $(".add-field", $(this)).click(function(e) {
      $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).show(500).find('input').val('').focus();
    });
    // Remove buttons
    $('.multi-field .remove-field', $wrapper).click(function() {
      if ($('.multi-field', $wrapper).length > 1)
        $(this).parents('.multi-field').remove();
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="multi-field-wrapper">
        <div class="multi-fields">
            <div class="multi-field">
                <div class="row">
                  <div class="col-md-2">
                  <input name="stuff1[]" type="text">
                </div>
                <div class="col-md-2">
                  <input name="stuff2[]" type="text">
                </div>
                <div class="col-md-2">
                  <input name="stuff3[]" type="text">
                </div>
                <div class="col-md-3">
                  <input name="stuff4[]" type="text">
                </div>
                <div class="col-md-2">
                  <button type="button" class="remove-field btn btn-danger">Remove</button>
                </div>
                </div>
                
                </div>
            </div>
            <button type="button" class="add-field btn btn-success">Add field</button>
        </div>