Delete HTML elements with JS. WORKING JSFIDDLE

Question

I made code to generate html rows.

How do I delete them now?? THis doesn't work

 $('.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>

You already asked this question. https://stackoverflow.com/q/48441993/1288408 Why ask again? — Modus Tollens, Jan 25 '18 at 12:21
@qweq I'd strongly suggest you read some guides on how this site works, for example ["What topics can I ask about here?"](http://stackoverflow.com/help/on-topic), ["What types of questions should I avoid asking?"](http://stackoverflow.com/help/dont-ask), and more importantly, please read [the Stack Overflow question checklist](http://meta.stackexchange.com/q/156810/204922). This isn't the first time you've asked multiple duplicate questions with very little research effort, and it's not the first time you've thrown abusive language at those attempting to help you. — Rory McCrossan, Jan 25 '18 at 12:42

score 0 · Answer 1 · answered Jan 25 '18 at 12:08

You need to setup the click event each time you have appended the HTML to the DOM.

At the moment you're loading the page, assigning a delete event to nothing, then when a user clicks to add a new item, it adds some html, and the delete event is not assigned.

score 0 · Answer 2 · answered Jan 25 '18 at 12:11

0

This Is You Want :

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

answered Jan 25 '18 at 12:11

Saurabh Mistry

8,903
4
33
51

@qweq , my code working or not ? – Saurabh Mistry Jan 25 '18 at 12:13
current row means ? , which element ? – Saurabh Mistry Jan 25 '18 at 12:15
I add a row right?? Now add 2 rows. When I click the delete i want to delete that row not all. – qweq Jan 25 '18 at 12:16
@qweq Maybe you should mention that requirement in your question. – Modus Tollens Jan 25 '18 at 12:17
Here there is no Row , you are adding two input text with button , please tell me what do u mean by row ? – Saurabh Mistry Jan 25 '18 at 12:18
1

yes , please clearify question , so i can give a try to solve it – Saurabh Mistry Jan 25 '18 at 12:19

score 0 · Accepted Answer · answered Jan 25 '18 at 12:20

Insert all your code inside a div(it's easier this way), and use a delegated event handler:

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

Harsha · Answer 4 · 2018-01-25T12:44:32.043

Change some parts of your code to the following, this is bad way to code, but for now it works.

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

Delete HTML elements with JS. WORKING JSFIDDLE

4 Answers4