1

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

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

4

4 回答 4

4

通过仅向删除按钮添加一个类，您可以使用此代码执行您想要的操作：

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

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

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

于 2013-08-29T20:35:32.333 回答
1

这是您编辑的 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);
    });
});
于 2013-08-29T20:41:44.347 回答
0 
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>');
    });
});
于 2013-08-29T20:41:31.543 回答
0

或者

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

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

于 2013-08-29T20:35:38.897 回答