Question

我有一个列表，我使用Jquery添加添加按钮的行。现在我还想删除动态添加的行，所以我也创建了一个删除按钮以及行，但删除按钮不起作用。

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

在列表中附加类似行的jquery以及删除按钮

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

现在当我点击删除按钮时，我需要删除particular行

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

首先，删除的jquery不起作用，其次如何删除被点击的行。

编辑：我的解决方案

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

Answer 1

元素在页面加载时不存在，因此您无法以这种方式将事件绑定到它。

您应该使用：

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

Jquery删除动态添加的行

1 个答案: