使用jquery添加和删除输入字段

使用jQuery添加输入字段时遇到问题。

我将限制设置为5个输入字段。 但是，如果我尝试删除输入字段，我的限制不起作用。 当我使用x–时，我的var x不是适当的减量，例如，如果我有5个输入字段，当我点击删除一个输入时，var x是-4而不是-1。

有人可以帮我解决这个问题。 我的代码是：

$('document').ready(function() { var max = 5; var x = 0; $('#add').click(function(e) { if(x < max) { $('#inp').append('
 X

'); x++; } $('.remove_field').click( function(e) { e.preventDefault(); $(this).parent('div').remove(); x--; }); }); }); 

Answer 1

问题是您是在添加处理程序中添加删除处理程序而不是使用事件委派 。 因此，之前添加的删除元素将获得多个删除处理程序，从而导致x多次递减

 jQuery(function ($) { var max = 5; var x = 0; $('#add').click(function (e) { if (x < max) { $('#inp').append('
 X

'); x++; } }); $('#inp').on('click', '.remove_field', function (e) { e.preventDefault(); $(this).parent('div').remove(); x--; }) }); 

  Add 
 

Answer 2

这是一个小例子，请看这个链接

 http://jsfiddle.net/vh3Js/ 

希望这会帮助你。

HTML：

JS：

 $(document).ready(function() { var inputs = 1; $('#btnAdd').click(function() { $('.btnDel:disabled').removeAttr('disabled'); var c = $('.clonedInput:first').clone(true); c.children(':text').attr('name','input'+ (++inputs) ); $('.clonedInput:last').after(c); }); $('.btnDel').click(function() { if (confirm('continue delete?')) { --inputs; $(this).closest('.clonedInput').remove(); $('.btnDel').attr('disabled',($('.clonedInput').length < 2)); } }); });