如何使用 JQuery 中的 ID 从表单中删除元素？答案

【问题标题】：How can I remove an element from a form using its ID in JQuery?如何使用 JQuery 中的 ID 从表单中删除元素？
【发布时间】：2023-01-03 13:36:12
【问题描述】：

大家好，新年快乐：D。

我目前正在尝试开发一种使用 javascript 和 jquery 从表单中添加和删除输入的方法。

问题是我不熟悉在 jquery 上声明函数，所以我请求你的帮助，因为我目前没有想法。

我目前有这个。

所以想法是在底部有 4 个按钮。两个用于添加或删除百分比“A”的额外输入，另一对用于添加或删除百分比“B”的额外输入。

我试图通过声明四个独立函数（即 addA、removeA、addB、removeB）来以简单的方式做到这一点，但我想在几行中实现这一点。所以这就是为什么我选择将它声明为具有两个输入参数的函数。因为我这样做了，所以代码不再起作用了:(

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idesc">
  <input type='text' id='idesc_1' value='idesc_1'>
</div>

<div id="edesc">
  <input type='text' id='edesc_1' value='edesc_1'>
</div>

<input type="hidden" value="1" id="idinpt">
<input type="hidden" value="1" id="edinpt">

<button id="idadd">Add input for data A</button><button id="idrem">Remove input for data A</button>
<button id="edadd">Add input for data B</button><button id="edrem">Remove input for data B</button>

<script type="text/javascript">
function add(inpnum, inpnam){
    var act_id = parseInt($('#'+inpnum).val());
  
  if(act_id<5){ //5 input
    var new_id = act_id+1;
    var new_input = "<input type='text' id='"+inpnam+"_"+new_id+"' value='"+inpnam+"_"+new_id+"'>";

    $('#'+inpnam).append(new_input);
    $('#'+inpnum).val(new_id);
    }
}

function remove(inpnum, inpnam){
    var last_id = $('#'+inpnum).val();

  if(last_id>1){
    $('#'+inpnam+'_'+last_id).remove();
    $('#'+inpnum).val(last_id-1);
  }
}

$('#edadd').on('click', add('edinpt','edesc'));
$('#edrem').on('click', remove('edinpt','edesc'));
$('#idadd').on('click', add('idinpt','idesc'));
$('#idrem').on('click', remove('idinpt','idesc'));
</script>
</body>
</html>

太感谢了！

【问题讨论】：

标签： javascript html jquery ajax input

【解决方案1】：

看起来问题在于您在点击处理程序中调用添加和删除函数的方式。目前，您正在立即调用函数并将它们的返回值传递给 on 方法，而不是传递对函数本身的引用。

要解决此问题，您可以将函数调用包装在一个匿名函数中，如下所示：

$('#edadd').on('click', function() {
    add('edinpt','edesc');
});
$('#edrem').on('click', function() {
    remove('edinpt','edesc');
});
$('#idadd').on('click', function() {
    add('idinpt','idesc');
});
$('#idrem').on('click', function() {
    remove('idinpt','idesc');
});

这样，单击按钮时将调用匿名函数，并使用适当的参数调用添加或删除函数。

【讨论】：