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

我已经动态创建了添加/删除字段。“添加”按钮工作正常。但是，当我单击“删除”按钮时，它只删除按钮，而不删除字段。下面是我的代码。。。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>

资金分配
分配项目计数
jQuery（文档）.ready（函数（$）{
//淡出所选项目并删除
$（文档）。在（'单击'，'删除分配字段'）上，函数（事件）{
event.preventDefault（）；
$（this.parent（）.fadeOut（300，function（）{
$（this.empty（）；
返回false；
});
});
var行=“”；
//添加输入
$（“#添加分配字段”）。单击（函数（）{
$（行）.fadeIn（“慢”）.appendTo（“#资金分配字段”）；
i++；
返回false；
});
});
而不是
$（this.empty（）
您需要执行
$（this.parent（）.empty（）



资金分配
分配项目
数量
var i=0；
jQuery（文档）.ready（函数（$）{
//淡出所选项目并删除
$（文档）。在（'单击'，'删除分配字段'）上，函数（事件）{
event.preventDefault（）；
$（this.parent（）.fadeOut（300，function（））{
$（this.parent（）.empty（）；
返回false；
});
});
var行=“”；
//添加输入
$（“#添加分配字段”）。单击（函数（）{
$（行）.fadeIn（“慢”）.appendTo（“#资金分配字段”）；
i++；
返回false；
});
});
而不是
$（this.empty（）
您需要执行
$（this.parent（）.empty（）



资金分配
分配项目
数量
var i=0；
jQuery（文档）.ready（函数（$）{
//淡出所选项目并删除
$（文档）。在（'单击'，'删除分配字段'）上，函数（事件）{
event.preventDefault（）；
$（this.parent（）.fadeOut（300，function（））{
$（this.parent（）.empty（）；
返回false；
});
});
var行=“”；
//添加输入
$（“#添加分配字段”）。单击（函数（）{
$（行）.fadeIn（“慢”）.appendTo（“#资金分配字段”）；
i++；
返回false；
});
});
只需将
#删除分配字段
更改为类而不是id，即
。删除JavaScript和附加HTML中的分配字段
只需将
#删除分配字段
更改为类而不是id，即
。删除JavaScript和附加HTML中的分配字段
HTML

您要克隆的字段模板中的元素现在应该有ID。记住文档不应该有重复的ID吗
移除按钮的
.customfield
元素包装时，请使用
.closest（“.customfields”）
删除
i++
使用静态最近的包装器
$（“.panel”）。在（'click'，'.js remove'，f.）上

无需
返回false；
在您的情况下。
Event.preventDefault（）
已经足够好了（如果需要，因为您没有任何
元素，并且正在使用
type=“button”
按钮。）


var字段=`
去除
`;
jQuery（函数（$）{
//淡出所选项目并删除
$（“.panel”）。在（'click'，'.js remove'，函数（e）上{
e、 预防默认值（）；
$（this）.closest（“.custom fields”）.fadeOut（300，function（）{
$（this.remove（）；
});
});
//添加输入
$（“#添加分配字段”）。单击（函数（e）{
$（字段）.appendTo（“#资金分配字段”）.fadeIn（“慢”）；
});
})；
#资金分配字段{背景：#eee；填充：10px；}

资金分配
分配项目
数量
添加

您要克隆的字段模板中的元素现在应该有ID。记住文档不应该有重复的ID吗
移除按钮的
.customfield
元素包装时，请使用
.closest（“.customfields”）
删除
i++
使用静态最近的包装器
$（“.panel”）。在（'click'，'.js remove'，f.）上

无需
返回false；
在您的情况下。
Event.preventDefault（）
已经足够好了（如果需要，因为您没有任何
元素，并且正在使用
type=“button”
按钮。）


var字段=`
去除
`;
jQuery（函数（$）{
//淡出所选项目并删除
$（“.panel”）。在（'click'，'.js remove'，函数（e）上{
e、 预防默认值（）；
$（this）.closest（“.custom fields”）.fadeOut（300，function（）{
$（this.remove（）；
});
});
//添加输入
$（“#添加分配字段”）。单击（函数（e）{
$（字段）.appendTo（“#资金分配字段”）.fadeIn（“慢”）；
});
})；
#资金分配字段{背景：#eee；填充：10px；}

资金分配
分配项目
数量
添加
请在存在
删除分配字段的地方共享HTML。请在存在
删除分配字段的地方共享HTML。不要使用
。如果我们更改，父（）不应损坏JSHTML@shawon191感谢Shawon完美地工作…：）不要使用
.parent（）
JS不应该因为我们的改变而崩溃HTML@shawon191谢谢Shawon工作得很好。。。