Question

我有一个表单，我可以动态添加更多行但是如果我尝试删除一个特定的行它不起作用，但第一行被删除没有问题。

这是html：

<form class="order-form">
  <div class="product-lines">
<!-- Product Line Section -->
  <div class="product-line">                
<a href="#" alt="close" class="btn-close" title="Remove"><img alt="remove" src="img/close.png"  /></a>
<input class="input-text" name="product-code" type="text" placeholder="Product Code" ></input>
<input class="input-text" name="product-quantity" type="text" placeholder="Quantity"></input>
<input class="input-text" name="product-discript" type="text" placeholder="Discription of Product"></input>
<label class="label-sign">&pound;</label>
<input class="input-text" name="product-price" type="text" placeholder="RRP Price"></input>
<br>
  </div>
</div>

<div id="product-btn">                  
<input name="btn-add-line" type="button" value="Add new line"></input>
<input name="btn-update" type="button" value="Update"></input>
<input name="btn-submit" type="submit" value="Submit Order"></input>
<label class="label-sign">&pound;</label>
<input class="input-text" name="order-info" type="text" placeholder="Order total" ></input>
</div>                  
</form>

我尝试过的jQuery代码：

$(".btn-close").on("click", function(e){
    $(e.currentTarget).parent().remove();   
});

我也试过

$(e.currentTarget).parents("div.product-lines).next("div.product-line).remove();

任何帮助都会受到最高的赞赏，而且解释对我来说也很有帮助。

Answer 1

尝试类似

的内容

$(".product-lines").on("click", ".btn-close", function(e){

    $(e.currentTarget).parent().remove();   

});

您无法将事件附加到当前不在页面（行）上的对象。您必须在产品系列对象上附加点击事件，当点击它时，您委托事件到＆＃34;最近的＆＃34; 产品系列对象！

Answer 2

您需要稍微更改jQuery以允许Event Delegation。这意味着将来添加的所有元素也会将事件附加到它们上。

$(document).on("click", ".btn-close", function(e){

   $(e.currentTarget).parent().remove();   

});

Answer 3

$('body').on('click','button id/class',function(){

$(e.currentTarget).parent().remove(); 
});

但如果您使用此代码，则会删除<div class="product-line">...</div>

为什么要删除此div。

我不太清楚你的问题。详细解释并逐步解释。

jQuery删除所选元素，动态生成

3 个答案: