jQuery 删除动态添加的行

Question

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

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

现在，当我点击“删除”按钮时，我需要删除那一行。特定的行。

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

首先，删除操作的jquery代码无法正常工作。其次，如何删除所点击的行。

编辑：我的解决方案

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

- user3342812

---

你的问题之一是添加了重复的ID字段。我非常确定 $（'DUPEID'） 只会获取它找到的第一个ID，因为ID应该是唯一的。 - mix3d

是的，那很有道理。我需要给一个不同的ID。我可以保留一个计数器并将计数附加到ID上。但是，为了删除Jquery，我将N删除按钮，显然我不能有那么多的jquery脚本。我想我需要向父级冒泡并解析ID，然后相应地删除元素。 - user3342812

只要你的作用域被正确处理，就不需要使用ID引用它们。只要每个新行的根元素都在监听.btn的点击事件，它就可以自我删除，你就不必担心哪一行是哪一个了。 - mix3d

Answer 1

页面加载时该元素不存在，因此无法以此方式绑定事件。

您应该使用：

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

- Luke P

---

我认为这不是一个好的方法，虽然它“可行”，但你不应该需要让文档监听点击事件，它应该仅封装在相关元素中。 - mix3d

是的，这只是为了说明它是如何工作的。 - Luke P