jQuery удалить выбранный элемент, динамически сгенерированный

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

Try что-то вроде

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

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

}); 

Вы не можете прикреплять события к объектам, которые не являются в настоящее время на странице (строки). Вам необходимо прикрепить событие click на товарных линиях объект, а при его нажатии вы делегат событие в "ближайшее" товар-line объект!

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.

Я не очень хорошо понимаю ваш вопрос. Объясните подробно и шаг за шагом.