用 JS 删除 HTML 元素。工作 JSFIDDLE [重复]答案

【问题标题】：Delete HTML elements with JS. WORKING JSFIDDLE [duplicate]用 JS 删除 HTML 元素。工作 JSFIDDLE [重复]
【发布时间】：2018-01-25 12:03:54
【问题描述】：

我编写了代码来生成 html 行。

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

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

$('#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>');
});

<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>

【问题讨论】：

你已经问过这个问题了。 stackoverflow.com/q/48441993/1288408为什么还要问？
@qweq 我强烈建议您阅读一些关于该网站如何运作的指南，例如"What topics can I ask about here?"、"What types of questions should I avoid asking?"，更重要的是，请阅读the Stack Overflow question checklist。这不是您第一次在很少的研究工作的情况下提出多个重复的问题，也不是您第一次对那些试图帮助您的人使用辱骂性语言。

标签： javascript jquery html

【解决方案1】：

将所有代码插入到 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这就是你想要的：

$(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();
});

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >


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

</div>

【讨论】：

@qweq ，我的代码是否有效？
当前行是什么意思？ , 哪个元素？
我加一行对吧？？现在添加 2 行。当我单击删除时，我想删除该行而不是全部。
@qweq 也许你应该在你的问题中提到这个要求。
是的，请把问题弄清楚，我可以尝试解决它

【解决方案4】：

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

$('#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();
            });

<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>

【讨论】：