使用JS删除HTML元素。工作JSFIDDLE

Question

我制作了生成html行的代码。

如何删除它们？这不起作用

 $('.deleteEnv').click(function () {
   $(this).parents().remove();
});

＆＃13;

＆＃13;

$('#addEnv').click(function() {
  $('#envVariablesDiv').append('<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Name</label><input id="envName" class="form-control" name="envName" type="text" placeholder="e.g. name1" /></div></div>' +
    '<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Variable</label><input class="form-control" id="envVar" type="text" name="envVar" placeholder="e.g. var1" /></div></div><div class="col-sm-2 top10"><button type="button" class="btn btn-danger deleteEnv"><span class="fa fa-trash">Delete</span></button></div>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="addEnv">Add</button>
<div id="envVariablesDiv">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

每次将HTML附加到DOM时，都需要设置click事件。

当您正在加载页面时，将删除事件分配给任何内容，然后当用户单击以添加新项目时，它会添加一些html，并且不会分配删除事件。

Answer 2

这是你想要的：

＆＃13;

＆＃13;

{ 
        "_id" : ObjectId("5a44a18c7d7aab074482e11f"), 
        "Rank" : "2/8", 
        "Status" : "Ok",  
        "position_temp" : [2,8],
        "position" : "Second"
}
{ 
        "_id" : ObjectId("5a44a18c7d7aab074482e11d"), 
        "Rank" : "4/12", 
        "Status" : "Ok", 
        "position_temp" : [4,12],
        "position" : "Other"
}

＆＃13;

$(document).on('click','#addEnv',function(){
  $('#envVariablesDiv').append('<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Name</label><input id="envName" class="form-control" name="envName" type="text" placeholder="e.g. name1" /></div></div>' +
    '<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Variable</label><input class="form-control" id="envVar" type="text" name="envVar" placeholder="e.g. var1" /></div></div><div class="col-sm-2 top10"><button type="button" class="btn btn-danger deleteEnv"><span class="fa fa-trash">Delete</span></button></div>');
});


$(document).on('click','.deleteEnv',function(){
  $('#envVariablesDiv').empty();
});

＆＃13;

＆＃13;

＆＃13;

Answer 3

将所有代码插入div中（这样更容易），并使用委托的事件处理程序：

$('#addEnv').click(function() {
  var parentDiv = $('<div/>', {
    class : 'parentDiv',
    html : '<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Name</label><input id="envName" class="form-control" name="envName" type="text" placeholder="e.g. name1" /></div></div>' +
    '<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Variable</label><input class="form-control" id="envVar" type="text" name="envVar" placeholder="e.g. var1" /></div></div><div class="col-sm-2 top10"><button type="button" class="btn btn-danger deleteEnv"><span class="fa fa-trash">Delete</span></button></div>'
  });
  $('#envVariablesDiv').append(parentDiv);
});

$('#envVariablesDiv').on('click', '.deleteEnv', function(){
    $(this).parent().parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="addEnv">Add</button>
<div id="envVariablesDiv">

</div>

Answer 4

将代码的某些部分更改为以下内容，这是一种不好的代码方式，但现在它可以正常工作。

＆＃13;

＆＃13;

$('#deleteEnv').click(function () {
                $(this).parents().remove();
                console.log("clicked");
                });
            $('#addEnv').click(function() {
                $('#envVariablesDiv').append('<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Name</label><input id="envName" class="form-control" name="envName" type="text" placeholder="e.g. name1" /></div></div>' +
                    '<div class="col-sm-5 top10"><div class="input-group"><label class="input-group-addon">Variable</label><input class="form-control" id="envVar" type="text" name="envVar" placeholder="e.g. var1" /></div></div><div class="col-sm-2 top10"></div>');
                $('#deleteEnv').show();
            });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addEnv">Add</button>
 <div id="envVariablesDiv"></div>
 <button type="button" class="btn btn-danger" style="display:none;" id = "deleteEnv"><span class="fa fa-trash">Delete</span></button>

＆＃13;

＆＃13;

＆＃13;