2

こんにちは、入力ごとに削除ボタンを追加するためのこのコードを書き込もうとしています。JavaScript を使用してそれぞれを問題なく追加します :·

しかし、削除ボタンはまったく機能しません。私のエラーがより速く表示されると思います。これは、私がJavaScriptの初心者であるためです。あなたが私を助けてくれることを願っています..

$(document).ready(function () {
    var i = $('.field').size() + 1;
    $('#add').click(function () {
        $('<div class="fieldss' + i + '"><label for="link' + i + '">Video/Link</label><input type="text" class="field' + i + '" name="link' + i + '" value="' + i + '" /><a href="#" id="remove' + i + '">Remove</a></div>').fadeIn('slow').appendTo('.inputs');
        i++
    });
    $('#remove' + i + '').click(function () {
        $('.fieldss' + i + '').remove();
        i--
    });
    $('#reset').click(function () {
        while (i > 2) {
            $('.field:last').remove();
            i--
        }
    });
    $('.submit').click(function () {
        var answers = [];
        $.each($('.field'), function () {
            answers.push($(this).val())
        });
        if (answers.length == 0) {
            answers = "none"
        }
        alert(answers);
        return false
    })
});

このように設定する方法がわからなかったので、問題は削除btnコードにあるに違いありません...私はこのように使用していましたが、これは追加された最後のアイテムだけを削除し、それぞれに削除btnが必要です。

 $('#reset').click(function () {
     while (i > 2) {
         $('.fieldss:last').remove();
         i--;
     }
 });
4

1 に答える 1

0

動的に追加しているため、存在する親にイベント委任バインディングイベントを使用できます。クラスを使用removeして、削除要素に追加します。また、次を使用することもできます<div class="fieldss">：-

$('#add')
        .click(function () {
        $('<div class="fieldss"><label for="link' + i + '">Video/Link</label><input type="text" class="field' + i + '" name="link' + i + '" value="' + i + '" /><a href="#" id="remove' + i + '" class="remove">Remove</a></div>')
            .fadeIn('slow')
            .appendTo('.inputs');
        i++;
    });

$(document).on('click','.remove', function() { 
// use a container selector instead of document.

   $(this).closest('.fieldss').remove();
});
于 2013-05-14T21:22:58.503 に答える