Question

我正在处理表单而且我有一个生成的字段，添加按钮正在运行，但删除所选字段的按钮不起作用..

我尝试更改脚本的值，但仍无法正常工作..

我希望你能帮助很多。

这是我的示例代码

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

更改$(this).parent('.multi-field').remove();到$(this).parent().parent().remove();

下面的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

.parent(".multi-field")应为.parents(".multi-field")。 .parents是多功能的，然后串起来.parent（）s＆＃39;。 .parents搜索所有父母的dom以获得给定的选择器。而且我认为这是你最初的意图。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: