У меня есть форма, и я могу динамически добавлять больше строк, но если я попытаюсь удалить определенную строку, она не сработает, однако первая строка будет удалена без проблем.
Вот 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">£</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">£</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();
Любая помощь была бы оценена по достоинству, и объяснение было бы очень полезно для меня, чтобы учиться.
Попробуйте что-нибудь вроде
$(".product-lines").on("click", ".btn-close", function(e){
$(e.currentTarget).parent().remove();
});
Вы не можете присоединить события к объектам, которые в настоящее время не находятся на странице (строках). Вам необходимо прикрепить событие click на объекте -линии, и когда он щелкнет, вы делегируете событие в "ближайший" объект линейки продуктов !
$('body').on('click','button id/class',function(){
$(e.currentTarget).parent().remove();
});
но если вы используете этот код, он удалит <div class="product-line">...</div>
почему вы хотите удалить этот div.
Я не очень хорошо понимаю ваш вопрос. Объясните подробно и шаг за шагом.
Вам нужно будет немного изменить jQuery, чтобы разрешить делегирование событий. Это означает, что все добавленные в будущем элементы также присоединятся к ним.
$(document).on("click", ".btn-close", function(e){
$(e.currentTarget).parent().remove();
});
$(document).on('click', '.btn-close', function(){...})