Удалить строку html генерировать динамически
Я пытаюсь удалить свою строку с помощью события и jquery.
Я создаю hmtl динамически, и с помощью одного очистителя значков и envet я хочу удалить свою строку. Но моя проблема в том, что если я удалю свою первую строку, удалю все строки или если я удалю свою последнюю строку, удалю эту строку.
Я не знаю, что я делаю неправильно.
у меня есть это:
$(".selectItem").on('click', function() {
if ($(this).is(':checked')) {
let value = $(this).val();
$.ajax({
url: document.location.origin + '/admin/articulos/selected',
type: 'GET',
data: {
'itemId': value
},
success: function(response) {
$(".row-info").append(`
<div class = "items_container ${value}">
<div class = "col-md-2 item_ref">${value}</div>
<div class = "col-md-6 item_description">${response[0].nombre}</div>
<div class = "col-md-3"><input type = "number" class = "form-control add_more_items" value = "1" style = "width: 100%; text-align:center" /></div>
<div class = "col-md-1"><i class = "fas fa-trash-alt fa-2x text-danger remove_line" style = "cursor:pointer;"></i></div>
</div>
`);
$(".remove_line").on('click', function() {
$("." + value).remove();
});
спасибо за ридми и извините за мой плохой английский
@Barmar, я обновил свой вопрос. Спасибо за ваш ответ
$(".remove_line").on('click' добавляет обработчик событий в все кнопки remove_line, а не только ту, которую вы только что добавили. Таким образом, каждая кнопка удаления удаляет эту строку и все строки, которые были добавлены после нее.
@Barmar outchh, это действительно... но как я могу полностью удалить эту строку, потому что я использую $(this) только для удаления моего значка...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Когда вы делаете
$(".remove_line").on('click', function() {
$("." + value).remove();
});
Вы добавляете этот прослушиватель событий ко всем кнопкам удаления, которые уже есть на странице.
Вместо добавления обработчика событий каждый раз, когда вы добавляете строку, используйте делегирование события один раз, чтобы создать один обработчик, который будет работать для всех динамически добавляемых строк. Он может использовать методы навигации DOM для удаления строки, содержащей его, вместо того, чтобы кодировать определенный класс в селекторе.
$(".row-info").on("click", ".remove_line", function() {
$(this).closest(".items_container").remove();
});
Для получения дополнительной информации см. Привязка событий к динамически создаваемым элементам?
Покажите, как вы объявляете
value.