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

Question

我大部分时间都在使用 PHP/HTML，而我为了理智而编写的一个小脚本(文书工作，太多的文书工作。)迫使我使用 JQuery。我已经在 Google、SO 等上进行了搜索，但没有找到任何与我当前使用的代码非常相似的内容，否则我就会迷失在该语言中。

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

JFiddle:http://jsfiddle.net/fmdx/jZU97/ (使用 JQuery 1.10.1)

HTML

<div>
<input type="checkbox" id="customcheck" name="custom" href="#custom">Custom Exceptions Needed?</div>
<div id="custom" style="padding-left:40px;">
    <input type="text" id="exception_1" placeholder="Six foot utility..."><br>
</div><!-- Ending Custom Div -->
<div style="padding-left:40px;"><a id="add_field" href="#"><span>Add Another Exception</span></a>
</div>

JQuery

var counter = 1;
$(function () {
$('a#add_field').click(function () {
    counter += 1;
    $('#custom').append(
        '<input id="exception_' + counter + '" name="dynfields[]' + '" type="text" placeholder="Six foot utility..." required><a href="#">Remove</a><br>');
     });
});

上面代码的基础我得到了一个教程，其中包括如何获取通过这些动态表单提交的所有信息并将它们放入数据库中。所以，我真的想专门使用这段代码。 (教程: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();
})

fiddle :http://jsfiddle.net/jZU97/5/

但是并不推荐使用 .next() 和 .prev()，所以我建议您将添加的输入重新组合到一个 div 中(每个 1 个)添加)并使用 .closest('div')。