在JQuery中删除动态生成的文本框

我花了大部分时间来处理PHP / HTML，并且我正在写一个小小的脚本，我的理智（文书工作，太多的文书工作。）迫使我使用JQuery。 我已经在谷歌，搜索等方面进行了搜索，但我没有发现任何与我目前正在使用的代码类似的内容，或者我在语言中迷失了方向。

下面的代码基本上是一个动态表单，可以根据需要添加文本框。 每个新生成的文本框都是表单提交所必需的（HTML5），但是如果我创建了一个不需要的额外文本框，我希望能够将其删除（所以它不会留给我一个字段我不需要，并且不能提交表格，因为它是必需的）。

JFiddle： http ： //jsfiddle.net/fmdx/jZU97/ （使用JQuery 1.10.1）

HTML

 Custom Exceptions Needed?
 
 
 
 
Add Another Exception  

JQuery的

 var counter = 1; $(function () { $('a#add_field').click(function () { counter += 1; $('#custom').append( 'Remove
'); }); }); 

上面代码的基础我得到了一个教程，其中包括如何获取通过这些动态表单提交的所有信息并将它们放入数据库。 所以，我真的试图专门使用这个代码。 （教程： http ： //www.infotuts.com/dynamically-add-input-fields-submit-to-database ）

感谢您提前提供任何帮助或建议！

Answer 1

只需在删除按钮中添加一个类，您就可以使用以下代码执行所需操作：

 $(document).on('click', '.remove', function(){ var $this = $(this); $this.add($this.prev()).add($this.next()).remove(); }) 

小提琴： http ： //jsfiddle.net/jZU97/5/

但是真的不推荐使用.next()和.prev() ，所以我建议你将你添加的输入重组为div（每个添加1个）并使用.closest('div') 。

Answer 2

这是你的jsfiddle编辑http://jsfiddle.net/krasimir/jZU97/6

我们的想法是将输入字段和按钮包装在div中。

 var counter = 1, custom = $('#custom'); $(function () { $('a#add_field').click(function () { counter += 1; var newRow = $('
Remove
'); custom.append(newRow); (function(index) { newRow.find('.remove-text-box').click(function() { custom.find('.row' + index).remove(); }); })(counter); }); }); 

Answer 3

要么

您可以使用委托（将一个处理程序附加到jutery的基于特定根元素的现在或将来匹配选择器的所有元素的一个或多个事件）

http://api.jquery.com/delegate/

Answer 4

 var counter = 1; $(function () { $('a#add_field').click(function () { counter += 1; $('#custom').append('
Remove
'); }); });