【发布时间】：2017-05-04 09:39:50
【问题描述】：
我可以使用单击添加一个 div 内容，并且可以生成多个或多个，但我也想在用户单击删除按钮时删除该生成的 div。我已经尝试了一些，但它只删除了一次。如果我在单击时生成了一个，那么当我单击删除时它会被删除，但是当我生成两个或更多时它不起作用。
$(document).ready(function() {
$("button[name='addDom']").click(function() {
var domElement = $('<div class="row " id="removechild"><hr><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">First Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="first_name" placeholder="First Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Last Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="last_name" placeholder="Last Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Gender</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"> <option value="">Male</option><option value="">Female</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Date of Birth</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="date" class="form-control" id="exampleInputDOB1" placeholder="Date of Birth" required="required" style="width:124%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Class Coordinator (if applicable)</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="class_coordinator" placeholder="Class Coordinator Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div></div><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">School Currently Attending</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="school" placeholder="School Currently Attending" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Relation with child</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="relation" placeholder="Relation with child" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Types of soccercric</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"><option value="">Soccer</option><option value="">Cricket</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Child medical condition <br> <span style="font-size:10px">Please indicate any relevant medical conditions or allergies your child may have (not required if your child has no relevant medical issues)</span></label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="relation" placeholder="Child medical condition" class="form-control" type="text" required="required" style="width:200%"></div></div></div</div</div><br><br><br><button onclick="clearBox()" class="btn btn-danger">Remove Child</button><hr>');
$(this).after(domElement);
});
});
function clearBox(removechild)
{
document.getElementById('removechild').innerHTML = "";
}
$("#removechild").html("");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="addDom" class="btn btn-warning"> Add Child</button>【问题讨论】：
-
ID 应该是唯一的.. 使用类而不是使用该类来删除添加的元素
-
@guradio 我认为前提是每个元素中都有一个按钮可以删除元素本身。在这种情况下，正如您所说，ID 必须是唯一的，并且应该根据此 ID 清空元素。使用该类将清除所有我认为不是目标的项目。
-
我建议你考虑使用模板库，因为它绝对是要包含在 JS 代码中的大量 HTML。
-
@DouwedeHaan 它不是重复的 ,,
标签： javascript jquery html css