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

我正在尝试使用jQuery在表单中创建从

select

添加的产品列表。
添加这些产品后，我希望将它们与

表单的其余部分一起发送

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

有人能帮我一下吗

谢谢



名义：
Ingreditentes:

普鲁巴
试验
添加
配料
#  
康蒂达
密歇根大学
Eliminar
$（文档）.ready（函数（）{
var x=0；
$（“.add行”）。单击（函数（）{
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=”“+x+“”+nombre+“”+cantidad+
“+um+”DEL”；
$（“tbody#tabla ingr”）。追加（标记）；
$（'表格收据'）。前置（''）；
$（'表格收据'）。前置（''）；
$（'表格收据'）。前置（''）；
});
$（文档）.on（'click'，'button.removebutton'，函数（）{
$（this）.closest（'tr'）.remove（）；
返回false；
});
});
您也可以使用jqueryselected
type=hidden
来删除，同时单击removeboton

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

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

代码片段：

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

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

我希望这是有意义的


$（文档）.ready（函数（）{
var x=0；
$（“.add行”）。单击（函数（）{
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=”“+x+“”+nombre+“”+cantidad+
“+um+”DEL”；
$（“tbody#tabla ingr”）。追加（标记）；
$（'表格收据'）。前置（''）；
$（'表格收据'）。前置（''）；
$（'表格收据'）。前置（''）；
});
$（文档）.on（'click'，'button.removebutton'，函数（）{
var ingrediente_row=$（this）.closest（'tr'）；
var ingrediente_id=$（ingrediente_行）。children（'td'）[0]。innerHTML；
$（'##_id_ingr_'+ingrediente_id）.remove（）；
$（'##u cantidad_ingr#u'+ingrediente_id）.remove（）；
$（'.#_um_ingr_'+ingrediente_id）.remove（）；
$（ingrediente_行）。删除（）；
返回false；
});
});

名义：
Ingreditentes:

普鲁巴
试验
添加
配料
#	
康蒂达
密歇根大学
Eliminar
只需为每个隐藏字段添加一个特定的类，并传递此no to delete按钮：


$（文档）.ready（函数（）{
var x=0；
$（“.add行”）。单击（函数（）{
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=”“+x+“”+nombre+“”+cantidad+
“+um+”DEL”；
$（“tbody#tabla ingr”）。追加（标记）；
$（'表格收据'）。前置（''）；
$（'表格收据'）。前置（''）；
$（'表格收据'）。前置（''）；
});
$（文档）.on（'click'，'button.removebutton'，函数（）{
$（'.'u hidden.'+$（this.data（'id'））.remove（）；
$（this）.closest（'tr'）.remove（）；
返回false；
});
});

名义：
Ingreditentes:

普鲁巴
试验
添加
配料
#
康蒂达
密歇根大学
Eliminar
如果使用
append（）
添加隐藏输入，则这些输入的顺序将与
表中所示的顺序相同

因此，在每个
ADD
click上创建了3个隐藏字段。

在
DEL
click上，我们知道单击发生在哪一行。

因此，我们可以扣除要删除的3个隐藏字段的
索引。

在HTML中，我在
表单中添加了

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

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

在这里，为了让它成为一个直观的例子。。。我使用类而不是隐藏字段。

添加的字段为绿色。在
DEL
click上，我们可以看到右键的目标是红色的。
hew。。。这将删除所有隐藏的输入。@LouySpatriceBesette是否还有其他隐藏的输入要保留？我只在每次单击“添加”按钮时才看到整个页面的隐藏输入
$(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;
});