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

Question

我创建了动态添加/删除字段。 “添加”按钮运行正常。但是，当我单击“删除”按钮时，它仅删除按钮而不删除字段。以下是我的代码...... Plz帮助......谢谢......

<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).empty()，您需要$(this).parent().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>

Answer 2

• 您要克隆的字段模板中的元素现在应该具有ID。请记住，文档不应该有重复的ID？
• 删除按钮的data bigEndian BYTE 4 DUP(?) littleEndian DWORD ? prompt BYTE "Please enter a number in HEX > ",0 .code main PROC mov edx, offset prompt CALL WriteString CALL ReadHex mov littleEndian, eax mov al, bigEndian + 4 mov bigEndian, al mov al, bigEndian + 5 mov bigEndian + 1, al mov al, bigEndian + 6 mov bigEndian + 2, al mov al, bigEndian + 7 mov bigEndian + 3, al ; should print here 元素包装时使用.closest(".custom-fields")。
• 删除.custom-field
• 使用静态最近的包装i++
，而不是将点击次数委托给document。
• 在您的情况下无需$(".panel").on('click', '.js-remove', f...。 return false;已经足够好了（如果您没有Event.preventDefault()个元素，那么即使需要，也可以使用<form>按钮。）

＆＃13;

＆＃13;

type="button"

＆＃13;

var field = `
<div class="custom-fields">
  <div class="row">
    <div class="col-md-5">
      <div class="form-group"><input type="email" class="form-control" placeholder="Email"></div>
    </div>
    <div class="col-md-5">
      <div class="form-group"><input type="email" class="form-control" placeholder="Email"></div>
    </div>
    <div class="col-md-2"><button type="button" class="btn btn-danger js-remove"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>REMOVE</button></div>
  </div>
  <div class="clear"></div>
</div>
`;


jQuery(function($) {

  //fadeout selected item and remove
  $(".panel").on('click', '.js-remove', function(e) {
    e.preventDefault();
    $(this).closest(".custom-fields").fadeOut(300, function() {
      $(this).remove();
    });
  });

  //add input
  $('#add-allocation-fields').click(function(e) {
    $(field).appendTo('#fund-allocation-fields').fadeIn("slow");
  });

});

＆＃13;

#fund-allocation-fields{background: #eee; padding: 10px;}

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需在JavaScript和附加HTML中将#remove-allocation-fields更改为一个类而不是id .remove-allocation-fields