Estoy trabajando en un formulario y tengo campos generados, el botón Agregar funciona, sin embargo, el botón para eliminar los campos seleccionados no funciona.

Traté de cambiar los valores de la secuencia de comandos pero aún no funciona.

Espero que puedan ayudar muchas gracias.

Aquí está mi código de muestra

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>
0
Mark Gerryl Mirandilla 5 abr. 2017 a las 03:34

2 respuestas

La mejor respuesta

.parent(".multi-field") debería ser .parents(".multi-field"). .parents es mucho más versátil que unir .parent () s '. .parents busca en todos los dom de los padres el selector dado. Y creo que esta fue tu intención original.

$(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>
1
Neil 5 abr. 2017 a las 00:45

Cambiar $(this).parent('.multi-field').remove(); a $(this).parent().parent().remove();

Fragmento a continuación

$(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>
1
repzero 5 abr. 2017 a las 01:08