Próbuję utworzyć listę produktów dodanych z select w formularzu za pomocą jQuery.
Po dodaniu tych produktów chciałbym wysłać je z resztą form.

Pytanie brzmi, gdy usunąłem produkt, chciałbym również usunąć ukryte wejście utworzone wcześniej.

Czy mógłbyś komuś dać mi rękę.

Dzięki!!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form-receta" id="form-receta">
  <label for="nombre_receta">Nombre :</label><input id="nombre_receta" name="name_receta" type="text">

  <label for="nombre_ingr">Ingredientes:</label><br />
  <select style="width:7.7em;display: inline-block;" id="nombre_ingr" name="nombre_ingr">
<option></option>
<option value="1*Prueba">Prueba</option>
<option value="2*Test">Test</option>
  </select>
  <input  id="cantidad_ingr" name="cantidad_ingr" placeholder="cantidad" type="text">
  <input  id="um_ingr" name="um_ingr" placeholder="U.M" type="text">
  <button type="button" class="add-row">ADD</button>
  <h3>Ingredientes</h3>
  <table>
<tr >
  <th>#</th>  
  <th></th>
  <th>Cantidad</th>
  <th>U.M</th>
  <th>Eliminar</th>            
</tr>
<tbody id="tabla-ingr"></tbody>
  </table>
  <script>
$(document).ready(function(){
  var x = 0;
  $(".add-row").click(function(){
    var id_nombre = $("#nombre_ingr").val();
    var res = id_nombre.split("*");


    var nombre = res[1];
    var id = res[0];
    var cantidad = $("#cantidad_ingr").val();
    var um = $("#um_ingr").val();
    x = x + 1;
    var markup = "<tr><td>" + x + "</td><td>" + nombre + "</td><td class=\"text-center\">" + cantidad + 
        "</td><td class=\"text-center\">" + um + "</td><td class=\"text-center\"><button type=\"button\" class=\"btn btn-xs btn-danger removebutton\"><span class=\"glyphicon glyphicon-remove\"></span>DEL</button></tr>";
    $("tbody#tabla-ingr").append(markup);


    $('#form-receta').prepend('<input type="hidden" name="_id_ingr[]" value="'+ id +'" />');
    $('#form-receta').prepend('<input type="hidden" name="_cantidad_ingr[]" value="'+ cantidad +'" />');
    $('#form-receta').prepend('<input type="hidden" name="_um_ingr[]" value="'+ um +'" />');
  });

  $(document).on('click', 'button.removebutton', function () {
    $(this).closest('tr').remove();
    return false;
  });

});
  </script>

Dzięki!

2
Sotz 30 czerwiec 2017, 06:51

5 odpowiedzi

Najlepsza odpowiedź

Możesz ustawić ID do tych wejściowych ukrytych elementów. Następnie, gdy usuniesz wiersz, możesz szukać identyfikatora tego konkretnego wiersza i usuwać tylko ukryte wejściowe związane z tym wierszem.

Mam nadzieję, że ma to sens!

$(document).ready(function(){
  var x = 0;
  $(".add-row").click(function(){
      var id_nombre = $("#nombre_ingr").val();
      var res = id_nombre.split("*");


      var nombre = res[1];
      var id = res[0];
      var cantidad = $("#cantidad_ingr").val();
      var um = $("#um_ingr").val();
      x = x + 1;
      var markup = "<tr><td>" + x + "</td><td>" + nombre + "</td><td class=\"text-center\">" + cantidad + 
      "</td><td class=\"text-center\">" + um + "</td><td class=\"text-center\"><button type=\"button\" class=\"btn btn-xs btn-danger removebutton\"><span class=\"glyphicon glyphicon-remove\"></span>DEL</button></tr>";
      $("tbody#tabla-ingr").append(markup);


      $('#form-receta').prepend('<input type="hidden" name="_id_ingr[]" id="_id_ingr_'+x+'" value="'+ id +'" />');
      $('#form-receta').prepend('<input type="hidden" name="_cantidad_ingr[]" id="_cantidad_ingr_'+x+'" value="'+ cantidad +'" />');
      $('#form-receta').prepend('<input type="hidden" name="_um_ingr[]" id="_um_ingr_'+x+'" value="'+ um +'" />');
  });

   $(document).on('click', 'button.removebutton', function () {
       var ingrediente_row = $(this).closest('tr');
       var ingrediente_id = $(ingrediente_row).children('td')[0].innerHTML;
       
       $('#_id_ingr_' + ingrediente_id).remove();
       $('#_cantidad_ingr_' + ingrediente_id).remove();
       $('#_um_ingr_' + ingrediente_id).remove();
       $(ingrediente_row).remove();
       
       return false;
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form-receta" id="form-receta">
  <label for="nombre_receta">Nombre :</label><input id="nombre_receta" name="name_receta" type="text">
 			
  <label for="nombre_ingr">Ingredientes:</label><br />
	<select style="width:7.7em;display: inline-block;" id="nombre_ingr" name="nombre_ingr">
    <option></option>
    <option value="1*Prueba">Prueba</option>
    <option value="2*Test">Test</option>
	</select>
  <input  id="cantidad_ingr" name="cantidad_ingr" placeholder="cantidad" type="text">
  <input  id="um_ingr" name="um_ingr" placeholder="U.M" type="text">
	<button type="button" class="add-row">ADD</button>
</form>

<h3>Ingredientes</h3>
<table>
  <tr >
   <th>#</th>	
   <th></th>
   <th>Cantidad</th>
   <th>U.M</th>
   <th>Eliminar</th>						
  </tr>
  <tbody id="tabla-ingr"></tbody>
</table>
1
JV Lobo 30 czerwiec 2017, 04:13

Jeśli ukryte wejścia zostały dodane przy użyciu append(), kolejność tych wejść byłby taki sam jak pokazany w table.

Jest więc 3 ukryte pola utworzone na każdym ADD Kliknij.
Na DEL Kliknij, wiemy na wierszu, który wystąpił kliknięcie.
Możemy więc odliczyć index 3 ukrytych pól do usunięcia.

W twoim HTML dodałem <div id="hiddenInputList"></div> w form.

Następnie w kodzie, aby dołączyć ukryte pola:

  // Append the hidden fields to a div, in the same order as the table.
  $('#hiddenInputList').append('<input type="hidden" name="_id_ingr[]" value="'+ id +'" />');
  $('#hiddenInputList').append('<input type="hidden" name="_cantidad_ingr[]" value="'+ cantidad +'" />');
  $('#hiddenInputList').append('<input type="hidden" name="_um_ingr[]" value="'+ um +'" />');

A następnie, aby je usunąć:

$(document).on('click', 'button.removebutton', function () {

  var thisTR = $(this).closest("tr");
  var thisTR_Index = thisTR.index();
  console.log("thisTR_Index: "+thisTR_Index);

  // Delete the 3 hidden fields (Must do it in the revers order)
  $('#hiddenInputList').find("[type='hidden']").eq((thisTR_Index*3)+2).remove();
  $('#hiddenInputList').find("[type='hidden']").eq((thisTR_Index*3)+1).remove();
  $('#hiddenInputList').find("[type='hidden']").eq(thisTR_Index*3).remove();

  // Remove the table row.
  thisTR.remove();
  return false;
});

W tym Codepen , aby być przykładem wizualnym .. . Zamiast ukrytych pól używałem klas.
Dodane pola są zielone. I na DEL Kliknij, widzimy, że w prawo są ukierunkowane, ponieważ zmieniają się na czerwono.

0
Louys Patrice Bessette 30 czerwiec 2017, 04:41

Możesz użyć input[type="hidden"], aby usunąć same elementy input.

Fragmenty kodu:

$(document).on('click', 'button.removebutton', function () {
    $(this).closest('tr').remove();
    $('#form-receta input[type="hidden"]').remove();
    return false;
});

Fiddle Demo

0
John R 30 czerwiec 2017, 04:08

Możesz wystarczyć wybrać jQuery type=hidden, aby go usunąć, podczas gdy klikniesz przycisk Usuń.

$(document).on('click', 'button.removebutton', function () {
    $(this).closest('tr').remove();
    $('[type=hidden]').remove();
    return false;
});
0
Horken 30 czerwiec 2017, 03:58

Wystarczy dodać określoną klasę dla każdego ukrytego pola i i przejdź do tego, aby usunąć przycisk:

$(document).ready(function(){
  var x=0;
  $(".add-row").click(function(){
      var id_nombre = $("#nombre_ingr").val();
      var res = id_nombre.split("*");


      var nombre = res[1];
      var id = res[0];
      var cantidad = $("#cantidad_ingr").val();
      var um = $("#um_ingr").val();
      x = x + 1;
      var markup = "<tr><td>" + x + "</td><td>" + nombre + "</td><td class=\"text-center\">" + cantidad + 
      "</td><td class=\"text-center\">" + um + "</td><td class=\"text-center\"><button type=\"button\" class=\"btn btn-xs btn-danger removebutton\" data-id='"+x+"'><span class=\"glyphicon glyphicon-remove\"></span>DEL</button></tr>";
      $("tbody#tabla-ingr").append(markup);


      $('#form-receta').prepend('<input type="hidden" name="_id_ingr[]" class="_hidden_'+x+'" value="'+ id +'" />');
      $('#form-receta').prepend('<input type="hidden" name="_cantidad_ingr[]" class="_hidden_'+x+'" value="'+ cantidad +'" />');
      $('#form-receta').prepend('<input type="hidden" name="_um_ingr[]" class="_hidden_'+x+'" value="'+ um +'" />');
  });

  $(document).on('click', 'button.removebutton', function () {
    $('._hidden_'+$(this).data('id')).remove();
    $(this).closest('tr').remove();
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form-receta" id="form-receta">
  <label for="nombre_receta">Nombre :</label><input id="nombre_receta" name="name_receta" type="text">

  <label for="nombre_ingr">Ingredientes:</label><br />
  <select style="width:7.7em;display: inline-block;" id="nombre_ingr" name="nombre_ingr">
    <option></option>
    <option value="1*Prueba">Prueba</option>
    <option value="2*Test">Test</option>
	</select>
  <input id="cantidad_ingr" name="cantidad_ingr" placeholder="cantidad" type="text">
  <input id="um_ingr" name="um_ingr" placeholder="U.M" type="text">
  <button type="button" class="add-row">ADD</button>
</form>

<h3>Ingredientes</h3>
<table>
  <tr>
    <th>#</th>
    <th></th>
    <th>Cantidad</th>
    <th>U.M</th>
    <th>Eliminar</th>
  </tr>
  <tbody id="tabla-ingr"></tbody>
</table>
1
Govind Samrow 30 czerwiec 2017, 04:37