1

Buenas. Necesito ayuda con un formulario de venta que estoy realizando. El formulario pide el nombre del cliente, y luego pide ingresar el producto y su cantidad. El problema es que en una venta se puede solicitar varios productos y en diferentes cantidades y aunque logro multiplicar los inputs, no logro eliminarlos. Mi código del jquery es el siguiente:

$(document).ready(function(){
$(".btn-danger").click(function(){
    $(".col-sm-9").append("<br /> <div id="+"input-extra"+" class="+"input-group"+">"+
                  "<input type="+"text"+" class="+"form-control"+">"+
                  "<div class="+"input-group-btn"+">"+
                  "<button type="+"button"+" id="+"btn-erase+"+" class="+"btn btn-danger"+">-</button>"+
                  "</div>"+
                "</div>");
});

$("#btn-erase").click(function(){
    $("#input-extra").remove();
});
});

El id #btn-erase seria el id del "button" agregado. Y el id #input-extra, seria tambien el "input" agregado, asi lo diferencio del fragmento de código html original.

Y este vendría a ser parte del formulario que intento agregar/eliminar.

<div class="form-group">
   <label class="col-sm-3 control-label">Ingrese el producto:</label>
   <div class="col-sm-9">
     <div class="input-group">
       <input type="text" class="form-control" placeholder="Ingrese el producto">
       <div class="input-group-btn">
         <button type="button" class="btn btn-danger">+</button>
       </div>
     </div>
   </div>
</div>

Además, no tengo idea de como agregar simultáneamente todos los "inputs" agregados a una base de datos. Puedo agregar el del field principal, pero no entiendo como trabajaría con los demás.

Gracias, de antemano.

1 respuesta 1

3

Tu código tiene dos problemas:

  1. La construcción del elemento de modo programático puede dar algunos fallos como que estés asignando un id=btn-erase+ cuando realmente querías id="btn-erase" (se te había colado un + al final del id).
  2. Cuando asignas el handle a los botones con ids btn-erase, los inputs que añades todavía no estaban en el DOM. Debes asignar el handle después de que son creados.

Sin cambiar el modo de construir los elementos que haces, un código que te puede funcionar sería:

$(function(){
  $(".btn-danger").click(function(){
    var h = $("<br /> <div id="+"input-extra"+" class="+"input-group"+">"+
                  "<input type="+"text"+" class="+"form-control"+">"+
                  "<div class="+"input-group-btn"+">"+
                  "<button type="+"button"+" id="+"btn-erase"+" class="+"btn btn-danger"+">-</button>"+
                  "</div>"+
                "</div>")
    $(".col-sm-9").append("<br />", h);
    h.find("btn-erase").on('click', function(){
      h.remove();
    });
  });
});

El borrado se hace de modo individual. Si buscas borrar todos, basta con sustituir el h.remove() por un selector jquery.

  $("div#input-extra").remove();

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.