Removing appended html code

Question

I currently ran into a problem that i cannot remove the appended html with jQuery.

What works now is i can append the html that i want and it looks nice, but removing does not work. It works only on reload the first loaded html the others that i append are not working - I don't know why.

Here is my code for appending the html:

$("#adWasteStream").click(function(){
    var newTxt = $('<div class="row-waste-container width-100"><div class="row"><div class="col-md-9"><p>Stream 1</p></div><div class="col-md-3"><button class="btn btn-add-waste deleteWasteStream"><i class="fa fa-minus-circle o-btn-add" aria-hidden="true"></i>Remove Waste Stream</button></div><div class="form-group col-md-7"><label for="business-mng-name" class="control-label">Waste Stream</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="Co-mingled recycling"><span class="help-block"></span></div></div><div class="row width-100"><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Volume (m <sup>3</sup>)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="50"><span class="help-block"></span></div><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Weight (t)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="20"><span class="help-block"></span></div><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Cost ($)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="400"><span class="help-block"></span></div></div></div>');
    $(".row-cont-main").append(newTxt);
});

My code for removing:

$(".deleteWasteStream").click(function(){
      var curRow = $(this).parents('div.row-waste-container');
      curRow.remove();
});

I don't need to use Id's as they need to be unique all elements (for back-end purposes).

The structure of the html looks like this:

<div class="row-waste-container width-100">
                                    <div class="row">
                                        <div class="col-md-9">
                                            <p>Stream 1</p>
                                        </div>
                                        <div class="col-md-3">
                                            <button class="btn btn-add-waste deleteWasteStream"><i class="fa fa-minus-circle o-btn-add" aria-hidden="true"></i>Remove Waste Stream</button>
                                        </div>
                                        <div class="form-group col-md-7">
                                            <label for="business-mng-name" class="control-label">Waste Stream</label>
                                            <input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="Co-mingled recycling">
                                            <span class="help-block"></span>
                                        </div>
                                    </div><!-- end row -->
                                    <div class="row width-100">
                                        <div class="form-group col-md-4">
                                            <label for="business-mng-name" class="control-label">Volume (m <sup>3</sup>)</label>
                                            <input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="50">
                                            <span class="help-block"></span>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="business-mng-name" class="control-label">Weight (t)</label>
                                            <input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="20">
                                            <span class="help-block"></span>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="business-mng-name" class="control-label">Cost ($)</label>
                                            <input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="400">
                                            <span class="help-block"></span>
                                        </div>
                                    </div><!-- end row -->
                                </div><!-- end row-waste container -->

Possible duplicate of Event binding on dynamically created elements? — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Feb 1, 2018 at 8:23

Amr Labib · Accepted Answer · 2018-02-01 08:22:09Z

2

You need to change your click event handler to handle also dynamically appended html.

Update your remove click handler with the code below

$("body").on('click' , '.deleteWasteStream' , function(){
      var curRow = $(this).parents('div.row-waste-container');
      curRow.remove();
});

answered Feb 1, 2018 at 8:22

Amr Labib

4,0933 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eddie · Accepted Answer · 2018-02-01 08:22:42Z

1

You cant use .click() on dynamic objects/html. You can use .on()

$("body").on('click', '.deleteWasteStream', function( event ) {
    var curRow = $(this).parents('div.row-waste-container');
    curRow.remove();
});

Documentation: http://api.jquery.com/on/

answered Feb 1, 2018 at 8:22

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

Comments

Silverman42 · Accepted Answer · 2018-02-01 08:49:17Z

0

Since the elements were created dynamically, they are not registered in DOM like pre-rendered elements (those rendered when your webpage is loaded in the browser). The best solution is binding the dynamically created element to the prerendered ones using the on event binder

$('.row-cont-main').on('click','.deleteWasteStream',function(){
     var curRow = $(this).parents('div.row-waste-container');
     curRow.remove();
});

edited Feb 1, 2018 at 8:49

answered Feb 1, 2018 at 8:35

Silverman42

1117 bronze badges

Collectives™ on Stack Overflow

Removing appended html code

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related