javascript - 动态添加/删除字段 - 删除按钮不删除字段

Question

我已经创建了动态添加/删除字段。添加按钮工作正常。但是当我单击删除按钮时，它只删除按钮而不删除字段。以下是我的代码...请帮助...谢谢...

<div class="panel panel-default">

  <div class="panel-heading"><center><b>Allocation of Funds</b></center></div>

  <div class="panel-body">

<div class="row"><div class="col-md-5"><label for="exampleInputPassword1">Allocation Items</label></div><div class="col-md-5"><label for="exampleInputPassword1">Amount</label></div><div class="col-md-2"></div></div><div class="row"><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-2"><button type="button" class="btn btn-success" id="add-allocation-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button></div></div>

<div id="fund-allocation-fields">

</div>

  </div>

</div>

<script type="text/javascript">

  jQuery(document).ready(function( $ ){

    //fadeout selected item and remove
    $(document).on('click', '#remove-allocation-fields', function(event) {
      event.preventDefault();
        $(this).parent().fadeOut(300, function(){ 
            $(this).empty();
            return false;
        });
    });

    var rows = '<div class="custom-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></div></div><div class="clear"></div></div>';

    //add input
    $('#add-allocation-fields').click(function() {
        $(rows).fadeIn("slow").appendTo('#fund-allocation-fields'); 
        i++;    
        return false;
    });

  });

</script>

Answer 1

您需要执行 $(this).parent().empty() 而不是 $(this).empty()

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">

  <div class="panel-heading">
    <center><b>Allocation of Funds</b></center>
  </div>

  <div class="panel-body">

    <div class="row">
      <div class="col-md-5"><label for="exampleInputPassword1">Allocation Items</label></div>
      <div class="col-md-5"><label for="exampleInputPassword1">Amount</label></div>
      <div class="col-md-2"></div>
    </div>
    <div class="row">
      <div class="col-md-5">
        <div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div>
      </div>
      <div class="col-md-5">
        <div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div>
      </div>
      <div class="col-md-2"><button type="button" class="btn btn-success" id="add-allocation-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button></div>
    </div>

    <div id="fund-allocation-fields">

    </div>

  </div>

</div>

<script type="text/javascript">
  var i = 0;
  jQuery(document).ready(function($) {

    //fadeout selected item and remove
    $(document).on('click', '#remove-allocation-fields', function(event) {
      event.preventDefault();
      $(this).parent().fadeOut(300, function() {
        $(this).parent().empty();
        return false;
      });
    });

    var rows = '<div class="custom-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></div></div><div class="clear"></div></div>';

    //add input
    $('#add-allocation-fields').click(function() {
      $(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
      i++;
      return false;
    });

  });
</script>