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

【问题标题】：Removing dynamically generated textboxes in JQuery删除 JQuery 中动态生成的文本框
【发布时间】：2013-08-29 20:28:25
【问题描述】：

我大部分时间都在使用 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）

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

【问题讨论】：

标签： jquery html forms

【解决方案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')。

【讨论】：

我认为当您将点击侦听器附加到它时，您应该定位确切的删除按钮。如果有另一个 .remove 按钮怎么办。
是的，它可以工作，但是您正在做的是将侦听器附加到 .remove 链接、div 或页面上具有此类的任何元素。想象一下，在页面的页脚有另一个具有相同类的元素。它将获得相同的侦听器。您应该将事件附加到确切的元素。
@Krasimir IMO，你应该知道你正在使用什么类，如果它们没有相同的目的，就不要复制同一类的 2 个......
是的。这是一个很好的建议，但事实是，在一个有几个开发人员的大项目中，总会有人会犯错误，使用同一个类。
是的，但无论如何，使用委托事件，您可以更改最近的静态父级的 $(document)，它不会在例如页脚中定位 .delete。但可以肯定的是，附加直接事件总是比附加委托事件更好。

【解决方案2】：

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

想法是将输入字段和按钮包装在一个div中。

var counter = 1,
    custom = $('#custom');
$(function () {
    $('a#add_field').click(function () {
        counter += 1;
        var newRow = $('<div class="row' + counter + '"><input id="exception_' + counter + '" name="dynfields[]' + '" type="text" placeholder="Six foot utility..." required><a href="javascript:void(0);" class="remove-text-box">Remove</a></div>');
        custom.append(newRow);
        (function(index) {
            newRow.find('.remove-text-box').click(function() {
                custom.find('.row' + index).remove();
            });
        })(counter);
    });
});

【讨论】：

【解决方案3】：

或

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

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

【讨论】：

【解决方案4】：

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

【讨论】：