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>