如何用jQuery通过ID移除表单元素？批量增删输入框代码排查

你的代码核心问题在于绑定点击事件时直接执行了函数，而不是把函数作为点击回调。比如$('#edadd').on('click', add('edinpt','edesc'))这行代码里，add('edinpt','edesc')会在页面加载时立刻运行，而不是等到按钮点击时才触发。

解决这个问题有两种常用方式：

方法一：用匿名函数包裹调用 #

把绑定事件的代码改成这样，通过匿名函数封装参数传递，确保只有点击时才执行目标函数：

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

方法二：用bind绑定参数 #

利用Function.prototype.bind预先绑定函数参数，生成新的回调函数：

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

以下是修复后的完整代码，两种方法任选其一替换事件绑定部分即可：

<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个输入框
    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', 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');
});
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者John Moore