3

Tengo un formulario y quiero borrar los elementos creados en cada vez que se agrega un nuevo elemento dinámicamente usando jQuery Validation Plugin v1.16

// only for demo purposes
$.validator.setDefaults({
    submitHandler: function() {
        //alert("submitted!");
        console.log("submitted!");
        var form_action =  $("body").find("#orderform").attr("action"); 
        var data = $("body").find("#orderform").serialize(); 
        console.log(data); 
        console.log(form_action); 
    }
});


$.validator.messages.max = jQuery.validator.format("El total no debe superar los {0}!");

$.validator.addMethod("quantity", function(value, element) {
    return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]);
}, "Rellene todos los campos de este item.");

$().ready(function() {
    $("#orderform").validate({
        rules:{
          fecha:{
            required: true,
            dateISO: true
          }
        },
        debug:true,
        errorPlacement: function(error, element) {
            error.appendTo(element.parent().next());
        },
        highlight: function(element, errorClass) {
            $(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass);
        }
    });

    var template = jQuery.validator.format($.trim($("#template").val()));

    function addRow() {
        $(template(i++)).appendTo("#orderitems tbody");
    }

    var i = 1;
    // start with one row
    addRow();
    
    // add more rows on click
    $("#add").click(addRow);

    // check keyup on quantity inputs to update totals field
    $("#orderform").on("keyup", "input.quantity", function(event) {
        var totals = 0+100;
        $("#orderitems input.quantity").each(function() {
            totals += +this.value;
        });
        $("#totals").attr("value", totals).valid();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

 

<div id="main">
<textarea style="display:inline" id="template">

<tr>
  <td>
    <label>Clon {0}</label>
  </td>


  <td class='type'>
    <select class="form-control" name="item-type-{0}" required>
    
      <option value="">Seleccione Partida</option>
      
     </select>
     
     <select class="form-control" name="idPartida{0}" id="idPartida{0}" required>
        <option value="">Seleccione Partida</option>
        
      </select>
  </td>

  <td class='quantity'>
  
    <input size='4' class="quantity" min="1" id="item-quantity-{0}" name="item-quantity-{0}">
  
  </td>

  <td class='quantity-error'></td>
</tr>


  </textarea>

<form id="orderform" class="cmxform" method="get" action="foo.php">
  <h2 id="summary"></h2>
    <table id="orderitems">

      <tbody>
      </tbody>
      
      <tfoot>
        <tr>
          <td colspan="2">
            <label>Totals (max 25)</label>
          </td>
          <td class="totals">
            <input id="totals" name="totals" value="0" max="25" readonly="readonly" size='4'>
          </td>
          <td class="totals-error"></td>
        </tr>
        <tr>
          <td>aaaa</td>
          <td>

          
            <label for="observacion" class="control-label"></label>
            <input id="observacion" name="observacion" minlength="2" type="text" required>


            <label for="plazo" class="control-label"></label>
            <input id="plazo" name="plazo" minlength="1" type="text" required>
          
            

          <div class="form-group">
            <label for="fecha" class="control-label"></label>
            <div class="col-sm-12">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                   <input type="date" name="fecha" class="form-control" id="fecha" placeholder="">     
                </div>
             </div>
          </div>

          </td>
          <td></td>
        </tr>
      
        <tr>
          <td>
            <button id="add">Clonar</button>
            <input class="submit" type="submit" value="Enviar Requisicion">
          </td>
        </tr>
      </tfoot>
    </table>

</form>

</div>





  <form class="form-horizontal">
     


          <div class="col-sm-6">
              <div class="form-group">
                <label for="new_credit" class="control-label"></label>
                <div class="col-sm-12">
                    <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                       <input type="number" name ="plazo" class="form-control" id="plazo" placeholder="Plazo">     
                    </div>
                 </div>
              </div>
          <div class="form-group">
            <label for="fecha2" class="control-label"></label>
            <div class="col-sm-12">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-plus"></i></span>
                   <input type="date" name="fecha2" class="form-control" id="fecha2" placeholder="">     
                </div>
             </div>
          </div>

              <div class="form-group">
                
                <div class="col-sm-12">
                    
                      <p>Total estimado : 222222</p>
                    
                 </div>
              </div>
            </div>
        </div>

      
      <hr/>

      
<div class="panel panel-default">
  <div class="panel-body">
       
     <div class="form-group">
        <label for="observacionRef" class="control-label"></label>
        <div class="col-sm-12">
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-pencil-square-o"></i></span>
               <input type="text" name="observacionRef" class="form-control" id="observacionRef" placeholder="Detalle Item">     
            </div>
         </div>
      </div>


    <div class="form-group">
      <label for="new_credit" class="control-label"></label>
      <div class="col-sm-12">
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-user"></i></span>
            <select class="form-control" id="idMandante" name="idMandante">
              <option value="">Seleccione Producto/Servicio ...</option>
            </select>
            
            <span class="input-group-btn">
               <button type="button" data-toggle="modal" data-target="#modalNuevoMandante" class="btn btn-success">
               <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Agregar Producto/Servicio</button>
            </span>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-6">
          <div class="form-group">
            <label for="new_credit" class="control-label"></label>
            <div class="col-sm-12">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-plus"></i></span>
                   <input type="number" name ="cantidad" class="form-control" id="monto" placeholder="Cantidad">     
                </div>
             </div>
          </div>
        </div>


          <div class="col-sm-6">
            <div class="form-group">
              <label for="new_credit" class="control-label"></label>
              <div class="col-sm-12">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-money"></i></span>
                     <input type="number" name ="monto" class="form-control" id="monto" placeholder="Monto">     
                  </div>
               </div>
            </div>
          </div>
      </div>

       

           <div class="form-group">
                  <div class="col-sm-12">
                      <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
                              <select class="form-control" id="idMandante" name="idMandante" required>
                              <option value="">Encargado</option>
                
                          </select>
                      </div>
                  </div>
                </div>

        </div>
        <div class="panel-footer">
           <button type="button" class="btn btn-success btn-sm clonarPagarFactura">Copiar</button>
              <button type="button" class="btn btn-sm btn-warning quitarPagarFactura">Quitar</button>
        </div>
      </div>

1
  • He añadido algunas bibliotecas que faltaban y puesto el código como ejecutable, pero aún así no termina de verse bien porque el código no está bien estructurado. De todos modos parece que ahora, aunque no se vea bien, sí se puede ver el problema. Por favor, lee Cómo preguntar y cómo crear un ejemplo mínimo verificable. Crear demos en las que se pueda ver el problema es esencial para que otros usuarios puedan ayudarte.
    – Alvaro Montoro
    Commented el 30 sept. 2018 a las 14:21

1 respuesta 1

2

vi tu ejemplo y agregas los nuevos elementos a un elemento llamado 'employeeList' , entonces con jquery le puedes decir que ese elemento se quede vacio:

$('#employeeList') // asi seleccionas el elemento que contiene a los elementos agregados

y con empty() lo dejas vacio

Prueba esto al dar clic a tu boton rest: $('#employeeList').empty()

y si solo quieres borrar el ultimo: $('#employeeList').children().last().remove()

Si quieres poder eliminar cada elemento agregado de manera individual, solo agrega esto a tu codigo js:

<a onclick="$(this).parent().parent().remove()" > Borrar </a>

y quedaria asi

<script type="text/html" id="addChild"> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Employee Name </label> <div class="col-md-4"> <input id="FirstName-{0}" name="FirstName-{0}" type="text" placeholder="Enter Employee Name" class="netEmp form-control input-md "> <a onclick="$(this).parent().parent().remove()" > Borrar </a> </div> </div> </script>

introducir la descripción de la imagen aquí

7
  • Explica tu código por favor
    – user75901
    Commented el 30 sept. 2018 a las 4:30
  • vi tu ejemplo y agregas los nuevos elementos a un elemento llamado 'employeeList' , entonces con jquery le puedes decir que ese elemento se quede vacio: $('#employeeList') // asi seleccionas el elemento que contiene a los elementos agregados y con empty() lo dejas vacio
    – Alex
    Commented el 30 sept. 2018 a las 4:37
  • Dale editar a tu respuesta y coloca ahí la explicación
    – user75901
    Commented el 30 sept. 2018 a las 4:37
  • Hola Alex, gracias por responder, espero haberme explicado de la mejor manera: "Tengo que clonar y ademas poner un boton para eliminar el elemento creado pero la dificultad es que es con jquery.validator Commented el 30 sept. 2018 a las 4:45
  • 1
    puse un solución espero te sirva
    – Alex
    Commented el 1 oct. 2018 a las 0:41

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.