Question

我已经使用“自动完成”功能创建了动态添加/删除字段。除“删除”按钮外，该代码工作正常。删除按钮不会删除字段。

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  var availableAttributes = [
    "account_address",
    "account_address_city",
    "account_address_country",
    "account_address_state",
    "account_telephone"
  ];

  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div class="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" class="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');

      $(wrapper).find("input[name^='user_login']").autocomplete({
        source: availableAttributes
      });
      //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });

});

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="input_fields_wrap">
</div>

<button class="add_field_button">Add More Fields</button>

Answer 1

您只是要删除直接父元素，而是先遍历.user-fields元素，然后再遍历remove()

使用

$(this).closest('.user-fields').remove();

并在分配CSS类时使用单个类属性。如果相同的属性发生两次，则不会出现相同的属性，因此后一个属性将被忽略，因此类remove_field未被分配给您的<button>，因此事件处理程序不起作用。

所以而不是

class="btn btn-danger" class="remove_field"

使用

class="btn btn-danger remove_field"

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  var availableAttributes = [
    "account_address",
    "account_address_city",
    "account_address_country",
    "account_address_state",
    "account_telephone"
  ];

  add_button.click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      var element = $('<div class="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');

      element.find("input[name^='user_login']").autocomplete({
        source: availableAttributes
      });

      wrapper.append(element);
      //add input box
    }
  });

  wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest('.user-fields').remove();
    x--;
  });
});

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="input_fields_wrap">

</div>

<button class="add_field_button">Add More Fields</button>

Answer 2

我创建了一个解决方案，您的问题是在按钮上使用双class属性，并且删除功能不准确

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    var availableAttributes = [
      "account_address",
      "account_address_city",
      "account_address_country",
      "account_address_state",
      "account_telephone"
    ];    
    
   

    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>'); 

            $(wrapper).find("input[name^='user_login']").autocomplete({
                source: availableAttributes
            }); 
            //add input box
        }
    });

    $(wrapper).on("click","#remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('.col-md-2').parent('div').remove(); x--;
    }); 

});

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="input_fields_wrap">

</div>

<button class="add_field_button">Add More Fields</button>

删除字段按钮在具有自动完成功能的动态添加/删除字段中不起作用

2 个答案: