javascript - 如何删除由 jQuery 添加的隐藏输入

Question

我正在尝试使用 jQuery 创建从 select 添加的产品列表。
添加这些产品后，我想将它们与 form 的其余部分一起发送。

问题是当我删除一个产品时，我也想删除之前创建的隐藏输入。

有人能帮帮我吗。

谢谢!!

<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>

谢谢!

Answer 1

您可以为那些输入的隐藏元素设置一个id。然后，当您删除该行时，您可以查找该特定行的 id，并仅删除与该行相关的隐藏输入。

我希望这是有道理的!

$(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>