0

Tengo un formulario que guarda datos de ventas, lo que hice fue crear un formulario y en caso de que se vendan mas de 1 producto el vendedor pueda presionar un button y agregar otra fila con los mismos campos. Ahora mi problema que en caso de que el usuario haga un click de mas y se genere un fila extra, eliminar esa fila extra. No estoy muy familiarizado con el jquery u otro elementos del javascript asi que espero que me ayuden con esta problemática.

codigo del formulario:

<form class="row gy-5 gx-3 align-items-center" id="formulario" action="{{route('store')}}" method="POST">
<div class="container col-md-4">
    <button type="button" class="clonar btn btn-secondary btn-sm">Agregar Producto</button>
    <button type="submit" class="btn btn-primary">Guardar</button><br>
</div>
    @csrf
<div class="container row justify-content-md-center">
    <div class="col-md-2">
        <label class="form-label">Fecha</label>
        <input type="date" name="fecha[]" class="form-control">
    </div>
    <div class="col-md-2">
        <label class="form-label">Nombre</label>
        <input type="text" name="nombre[]" class="form-control">
    </div>
    <div class="col-md-2">
        <label class="form-label">Cantidad</label>
        <input type="text" name="cantidad[]" class="form-control">
    </div>
    <div class="col-md-2">
        <label class="form-label">Costo</label>
        <input type="text" name="costo[]" class="form-control">
    </div>
</div>
</form>

y mi codigo de jquery:

<script type="text/javascript">
$('.clonar').click(function() {
var $clone = $('#formulario .row').last().clone();

$clone.appendTo('#formulario');
});
</script>

1 respuesta 1

0

Crea un evento, puedes crearlo para una clase del cual todos los botones que sirvan para remover actuen en un tal. Por ejemplo:

<button class="removerFila">remover</button>

Ese botón podría estar dentro de la misma fila a remover, entonces:

jQuery(".removerFila").on("click", function(){ jQuery(this).closest(".row").remove(); });

Explicación: El elemento button al estar dentro del row se removerá junto a todo el contenido ya que al activarse el evento en JQuery se buscará el elemento padre que coincida con la clase .row, no es necesario que button sea un hijo directo ya que clsest busca dentro de todo el arbol de nodos hasta encontrar el primer elemento que coincida, por tanto, al encontrarlo lo remueve junto con todo su contenido.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.