javascript - 動的に作成されたボタンの配置

Question

4 つのテキスト ボックスを作成しました。削除ボタンをクリックすると、次のような削除ボタンのある別のテキスト ボックスのセットが追加されます。

これは私のスクリプトです

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

これはうまくいくはずです：

$(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が含まれていると思います。