Javascript 如何使用jquery删除onclick生成的多个div元素

我可以使用on click添加一个div内容，并可以多次生成它，但我还希望在用户单击remove按钮时删除生成的div。我试过一些，但只去掉一次。如果我在单击时生成了一个，那么当我单击“删除”时它将被删除，但当我生成两个或更多个时它将不起作用

$（文档）.ready（函数（）{
$（“按钮[name='addDom']）。单击（函数（）{
var DomeElement=$（“
名字姓氏性别男性出生日期班级协调员（如适用）目前就读的学校与SoccerCricsOccerCricket儿童疾病类型的关系
请说明您的孩子可能患有的任何相关疾病或过敏症（如果您的孩子没有相关的医疗问题，则不需要）在您的addDom内单击添加此代码

   var domElement = $('<div class="child"><div class="row "><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 class="removeChild" class="btn btn-danger">Remove Child</button><hr></div>');
$(this).after(domElement);

它会起作用的！
在addDom中单击添加此代码

   var domElement = $('<div class="child"><div class="row "><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 class="removeChild" class="btn btn-danger">Remove Child</button><hr></div>');
$(this).after(domElement);

它会起作用的！
试试这个：

$('addBtn').click(function(){
    var $div = $('<div class="test">...</div>');
    $(this).after($div);
})

$('.removeBtn').click(function(){
    var $div = $('.test').last();
    $div.length && $div.remove();
})

$（'addBtn'）。单击（函数（）{
变量$div=$（'…'）；
美元（本）。之后（$div）；
})
$（'.removeBtn'）。单击（函数（）{
var$div=$（'.test'）.last（）；
$div.length&&$div.remove（）；
})
试试这个：

$('addBtn').click(function(){
    var $div = $('<div class="test">...</div>');
    $(this).after($div);
})

$('.removeBtn').click(function(){
    var $div = $('.test').last();
    $div.length && $div.remove();
})

$（'addBtn'）。单击（函数（）{
变量$div=$（'…'）；
美元（本）。之后（$div）；
})
$（'.removeBtn'）。单击（函数（）{
var$div=$（'.test'）.last（）；
$div.length&&$div.remove（）；
})
正如我和@guratio在评论中提到的，您的ID应该是唯一的。最简单的方法是在每个元素ID后面添加一个全局整数变量，然后递增：

var elemIndex = 0;
createElement(){
    var newId = "someElement" + elemIndex;
    var domElement = '<div id="'+ newId +'"'>...</div>';
}

和按钮（在构建元素字符串时显示）：

var-domElement='…清除…'；
正如我和@guratio在评论中提到的，您的ID应该是唯一的。最简单的方法是在每个元素ID后面添加一个全局整数变量，然后递增：

var elemIndex = 0;
createElement(){
    var newId = "someElement" + elemIndex;
    var domElement = '<div id="'+ newId +'"'>...</div>';
}

和按钮（在构建元素字符串时显示）：

var-domElement='…清除…'；

用一个类（子类）将整个“部分”包装在一个div中
已从div中删除id“removeChild”，因为您不应拥有超过1个id
有这个价值
已删除内联onclick事件并替换为
一个事件，删除离您单击的按钮最近的部分
在remove按钮中添加了一个类（removeChild），因此我们可以使用该类轻松设置click事件


$（文档）.ready（函数（）{
$（“按钮[name='addDom']）。单击（函数（）{
var DomeElement=$（“
名字姓氏性别男性出生日期班级协调员（如适用）目前就读的学校与SoccerCricsOccerCricket儿童疾病类型的关系
请说明您的孩子可能患有的任何相关疾病或过敏症（如果您的孩子没有相关的医疗问题，则不需要）

用一个类（子类）将整个“部分”包装在一个div中
已从div中删除id“removeChild”，因为您不应拥有超过1个id
有这个价值
已删除内联onclick事件并替换为
一个事件，删除离您单击的按钮最近的部分
在remove按钮中添加了一个类（removeChild），因此我们可以使用该类轻松设置click事件


$（文档）.ready（函数（）{
$（“按钮[name='addDom']）。单击（函数（）{
var DomeElement=$（“
名字姓氏性别男性出生日期班级协调员（如适用）目前就读的学校与SoccerCricsOccerCricket儿童疾病类型的关系
请说明您的孩子可能患有的任何相关疾病或过敏症（如果您的孩子没有相关的医疗问题，则不需要）您可以通过使用Jquery遍历来实现这一点。单击“删除”按钮可以删除相应的父div。请参阅此JSFIDLE链接

$(document).on( "click", ".removeBtn", function() {
  $(this).parent().parent().parent().remove();
});

您可以通过使用Jquery遍历来实现这一点。单击remove按钮可以删除相应的父div。请参阅此JSFIDLE链接

$(document).on( "click", ".removeBtn", function() {
  $(this).parent().parent().parent().remove();
});

您应该将表单包装成一个div，然后按如下方式删除该div：


var id=0；
$（文档）.ready（函数（）{
$（“按钮[name='addDom']）。单击（函数（）{
var DomeElement=$（“
名字姓氏性别男性出生日期班级协调员（如适用）目前就读的学校与SoccerCricsOccerCricket儿童疾病类型的关系
请说明您的孩子可能患有的任何相关疾病或过敏症（如果您的孩子没有相关的医疗问题，则不必填写）您应该将您的表格包装到div中，然后按如下方式删除div：


var id=0；
$（文档）.ready（函数（）{
$（“按钮[name='addDom']）。单击（函数（）{
var DomeElement=$（“
名字姓氏性别男性出生日期班级协调员（如适用）目前就读的学校与SoccerCricsOccerCricket儿童疾病类型的关系
请说明您的孩子可能患有的任何相关疾病或过敏症（如果您的孩子没有相关的医疗问题，则不需要）您需要分配一个唯一的ID，然后在clearBox功能中提供该唯一ID

$(document).ready(function() {
    var count = 0;

    $("button[name='addDom']").click(function() {
        var uniqueID = "removechild-" + count,
            html = '<div class="row" id="' + uniqueID + '">row of stuff<button onclick="clearBox(\'' + uniqueID + '\')" class="btn btn-danger">Remove Child</button></div>';

        $(this).after(html);

        count++;
    });
});

function clearBox(idToRemove) {
    document.getElementById(idToRemove).innerHTML = "";
}

$（文档）.ready（函数（）{
var计数=0；
$（“按钮[name='addDom']）。单击（函数（）{
var uniqueID=“removechild-”+计数，
html='删除子项的行'；
$（this）.after（html）；
计数++；
});
});
功能clearBox（idToRemove）{
document.getElementById（idToRemove.innerHTML=“”；
}

CodePen示例：
您需要分配唯一ID，然后在clearBox函数中提供此唯一ID

$(document).ready(function() {
    var count = 0;

    $("button[name='addDom']").click(function() {
        var uniqueID = "removechild-" + count,
            html = '<div class="row" id="' + uniqueID + '">row of stuff<button onclick="clearBox(\'' + uniqueID + '\')" class="btn btn-danger">Remove Child</button></div>';

        $(this).after(html);

        count++;
    });
});

function clearBox(idToRemove) {
    document.getElementById(idToRemove).innerHTML = "";
}

$（文档）.ready（函数（）{