Jquery remove dynamically added rows

Question

I have a list where I add rows with Add button using Jquery. Now I also want to remove the dynamically added rows so I created a delete button dynamically along with the rows too but that delete button is not working.

<div id="quantityTable">
     <div class="row frmrw">  
          <div class="form-group col-md-6">
                <label class="col-md-6 control-label" for="name">Quantity:</label>
                <div class="col-md-6">
                       <input type="text" class="form-control" placeholder="Quantity" name="quantity"  />
                </div>
     </div>
     <div class="form-group col-md-6">
            <div data-role="button" id="addQty" class="btn btn-success">Add Quantity</div>                         
     </div>

the jquery that appends a similar row in the list along with a remove button

$("#addQty").click(function () {

                $("#quantityTable").append("<div class=\"row frmrw\"> "+  
                                    "<div class=\"form-group col-md-6\"> "+
                                    "<div class=\"col-md-6\">"+
                                    "<input type=\"text\" class=\"form-control\" "+
                                    "placeholder=\"Quantity\" name=\"quantity\"  /> </div></div> "+
                                    "<div class=\"form-group col-md-6\">"+
                                    "<div data-role=\"button\" id=\"rmvQty\" class=\"btn btn-success\"> "+
                                    "Remove Quantity</div> </div> </div>");
            }
            );

Now when I click on the remove button I need to remove that particular row

$("#rmvQty").on("click", function () {
                console.log("as");
            });

Firstly the jquery for remove is not working and secondly how do I remove the row that was clicked on.

EDIT : my solution

$("#quantityTable").on("click", function (e) {
                if(e.target.id == "rmvQty" ){
                     e.target.parentNode.parentNode.remove();
                }
            });

Part of your problem is that you are adding duplicate ID fields. I'm pretty sure that `$('DUPEID') will only grab the first ID it finds, since IDs are supposed to be unique. — mix3d, Mar 22 '16 at 17:17
yes that makes sense. I will need to give a different Id. What I can do is keep a counter and append the count to the Id. but then for remove Jquery i will N remove button and obviously i cant have that many jquery script. I guess i'll need to bubble up to the parent and parse the ID and accordingly delete the element — user3342812, Mar 22 '16 at 17:26
You shouldn't need to reference them with the ID, however, if your scope is handled correctly. As long as the root of each new row is listening for clicks from `.btn`, then it can remove itself, and you never need to worry about which row is which. — mix3d, Mar 22 '16 at 17:28

score 0 · Answer 1 · answered Mar 22 '16 at 17:17

0

The element doesn't exist on page load, so you can't bind an event to it this way.

You should use:

$(document).on('click', '#rmvQty', function(){
    console.log("as");
});

answered Mar 22 '16 at 17:17

Luke P

723
7
19

I don't think this is a good approach, sure it "works", but you shouldn't need to have the document listening for clicks, it should be encapsulated only to the elements in question. – mix3d Mar 22 '16 at 17:21
True, this was just meant to illustrate how it works – Luke P Mar 22 '16 at 17:23

Jquery remove dynamically added rows

1 Answers1