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，并仅删除与该行相关的隐藏输入。

我希望它有意义！

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

$(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;
   });
});

Answer 2

只需为每个隐藏字段添加一个特定的类，并将此no传递给删除按钮：

＆＃13;

$(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;
  });
});

＆＃13;

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

＆＃13;

Answer 3

你可以使用Jquery选择type=hidden来删除，同时点击删除按钮。

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

Answer 4

您可以使用input[type="hidden"]单独删除input元素。

代码段：

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

Fiddle Demo

Answer 5

如果隐藏的输入是使用append()添加的，则这些输入的顺序与table中显示的顺序相同。

因此，每次ADD点击都会创建3个隐藏字段在DEL点击后，我们知道点击发生的行因此，我们可以扣除要移除的3个隐藏字段中的index。

在您的HTML中，我在<div id="hiddenInputList"></div>中添加了form。

然后在代码中，附加隐藏字段：

  // 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 +'" />');

然后，删除它们：

$(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;
});

在这个CodePen中，要使它成为一个可视化的例子......我使用了类，而不是隐藏的字段添加的字段为绿色。在DEL点击后，我们可以看到右对齐是因为它们变红了。

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

5 个答案: