javascript - 动态字段的删除按钮不起作用

Question

我正在处理一个表单，并且有一个生成的字段，添加按钮正在工作，但是用于删除所选字段的按钮不起作用。

我尝试更改脚本的值但仍然不起作用..

希望您能帮忙，非常感谢。

这是我的示例代码

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

.parent(".multi-field") 应该是 .parents(".multi-field")。 .parents 比串在一起的 .parent()s' 更加通用。 .parents 在所有父级的 dom 中搜索给定的选择器。我认为这就是您的初衷。

$(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>