Estoy tratando de eliminar mi línea con event y jquery.
Estoy creando hmtl dinámicamente y con un limpiador de íconos y envet quiero eliminar mi línea. Pero mi problema es que si elimino mi primera línea, elimino todas las líneas, o si elimino mi última línea, elimino esta línea.
No se que estoy haciendo mal.
tengo esto:
$(".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(); });gracias por leerme y perdón por mi mal inglés
Cuando tu lo hagas
$(".remove_line").on('click', function() { $("." + value).remove(); });Está agregando ese detector de eventos a todos los botones de eliminación que ya están en la página.
En lugar de agregar un controlador de eventos cada vez que agrega una fila, use la delegación de eventos una vez para crear un solo controlador que funcione para todas las filas agregadas dinámicamente. Puede usar métodos de navegación DOM para eliminar la fila que lo contiene, en lugar de tener que codificar una clase específica en el selector.
$(".row-info").on("click", ".remove_line", function() { $(this).closest(".items_container").remove(); });Para obtener más información, consulte ¿Enlace de eventos en elementos creados dinámicamente?