Question

这就是我所拥有的：

<div id="sizes-field-cover">
    <div>
        <input type="text" name="size-sizes-1[]" value="" />
        <input type="text" name="size-sizes-1[]" value="" />
    </div>
    <div>
        <input type="text" name="size-sizes-2[]" value="" />
        <input type="text" name="size-sizes-2[]" value="" />
    </div>
    <div>
        <input type="text" name="size-sizes-3[]" value="" />
        <input type="text" name="size-sizes-3[]" value="" />
    </div>
</div>

当我点击<button>

时，这就是我想要的结果（在所有div中添加另一个输入元素）

<div id="sizes-field-cover">
    <div>
        <input type="text" name="size-sizes-1[]" value="" />
        <input type="text" name="size-sizes-1[]" value="" />
        <input type="text" name="size-sizes-1[]" value="" />
    </div>
    <div>
        <input type="text" name="size-sizes-2[]" value="" />
        <input type="text" name="size-sizes-2[]" value="" />
        <input type="text" name="size-sizes-2[]" value="" />
    </div>
    <div>
        <input type="text" name="size-sizes-3[]" value="" />
        <input type="text" name="size-sizes-3[]" value="" />
        <input type="text" name="size-sizes-3[]" value="" />
    </div>
</div>

添加：

<button id="add-sizes-column">(+) Add</button>

要删除：

<button id="remove-sizes-column">(-) Remove</button>

这两个人没有做任何事情：

$('#add-sizes-column').click(function(event) {
    event.preventDefault();

    var $cloned = $('#sizes-field-cover div div:last').clone();
    $('#izes-field-cover div:last').after($cloned);
});

$('#remove-sizes-column').click(function(event) {
    event.preventDefault();

    var $cloned = $('#sizes-field-cover div div:last').remove();
});

Answer 1

检查此解决方案。它将文本框附加在同一行而不是你问题中提到的新行。

<强> DEMO

$('#add-sizes-column').click(function(event) {
    debugger;
    event.preventDefault();

    $("#sizes-field-cover div").each(function(index, val){
        var oCloned = $(val).find("input:last").clone();
        $(val).append(oCloned);
    });
});

$('#remove-sizes-column').click(function(event) {
    event.preventDefault();

    $("#sizes-field-cover div").each(function(index, val){
        $(val).find("input:last").remove();
    });
});

Answer 2

你应该删除一个div字

例如：

var $cloned = $('#sizes-field-cover div:last').remove();

查看此jsfiddle

Answer 3

以下是解决方案的演示

http://jsfiddle.net/LaLtJ/

基本上我正在使用你的代码，而是通过循环迭代来分解和处理每个div。我相信这是你想要的结果。

$('#add-sizes-column').on('click', function(event) {
    event.preventDefault();
    $('#sizes-field-cover div').each(function() {
        var $cloned = $('input:last', $(this)).clone();
        $('input:last', $(this)).after($cloned);
    });
});

$('#remove-sizes-column').on('click', function(event) {
    event.preventDefault();
    $('#sizes-field-cover div').each(function() {
        $('input:last', $(this)).remove();
    });
});

添加（克隆）和删除列（输入元素）作为最后一个元素的div

3 个答案: