定位动态创建的按钮

Question

我创建了四个文本框，当我单击一个删除按钮时，它会添加另一组带有删除按钮的文本框，如下所示：

这是我的剧本

$(document).ready(function() {
    $("#add").click(function () {
        $('.main').append("<div><br />" + $('.append_list').html() + '<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');
    });
});

如何在动态创建的第一个文本框旁边添加此按钮？

参考此Question

输出图片

Answer 1

创建一个临时容器，在其中插入克隆的输入列表。然后找到该临时容器中的第一个输入：

$(document).ready(function() {
    $("#add").click(function () {
        var container = $('<div />').addClass('justadded').appendTo('.main');
        $(container).append($('.append_list').html());
        var input = $(container).find('input:first');
        $('<button />').text("Remove").addClass('rmv_btn').attr('onclick', '$(this.parentNode).remove()').insertAfter(input);
        $(container).removeClass('justadded');
    });
});

Answer 2

请参阅：http://jsfiddle.net/MpEUZ/5/

$(document).ready(function() {
$("#add").click(function() {
    $('.main > :first-child').clone().appendTo('.main').find('input[type=text]').val('');
    $('.main .append_list:last').find('input[type=text]:first').after("<button class='rmv_btn' style='clear:both'> Remove </button>");

});
$('.main').on("click", ".rmv_btn", function() {
    $(this).parent().remove();
});
});​

Answer 3

这个应该有效：

$(document).ready(function() {
    $("#add").click(function () {
        var html = $($('.append_list').html());
        html.find('input').first().after('<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');

        $('.main').append("<div><br />" + html);
    });
});

我猜$('.append_list')包含输入的好html。