javascript - 定位动态创建的按钮

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

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

参考这个问题

输出图像

Answer 1

看到这个：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 2

Create a temporary container in which you insert your cloned input list. Then find the first input in that temp container:

$(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 3

This one should works :

$(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);
    });
});

I guess $('.append_list') is containing the good html for the inputs.