Question

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

下面的代码基本上是一个动态表单，可以根据需要添加文本框。每个新生成的文本框都是表单提交所必需的（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();
})

小提琴：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 = $('<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);
    });
});

Answer 3

OR

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

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

Answer 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>');
    });
});

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

4 个答案: