jquery - Jquery .remove が機能しない (私にとっては...)

Question

ここでは、チェックボックスがチェックされているときにdivを追加し、チェックされていないときに同じdivを削除できるようにしようとしています。問題は .remove() が呼び出されたときだと思います..何が問題なのかわかりません。助けてくれてどうもありがとう！

    $(document).ready(function(){
         $('.checked_locations').click(function(){
            if ($(this).is(':checked'))
            {
                var value = $(this).val();
                $('#locations_filter').append("<div id='hidden_"+value+"'><input type='hidden' name='loc_filter[]' value='"+value+"' /></div>");
            }
            else
            {
                //alert('not checked');
                $('#locations_filter #hidden_'+value).remove(); 
            }
        });

    });

Answer 1

valueあなたのelseステートメントでは未定義です。その宣言を if ステートメントの外に移動します。

$(document).ready(function() {
    $('.checked_locations').click(function() {
        var value = $(this).val();
        if ($(this).is(':checked')) {
            $('#locations_filter').append("<div id='hidden_" + value + "'><input type='hidden' name='loc_filter[]' value='" + value + "' /></div>");
        }
        else {
            //alert('not checked');
            $('#hidden_' + value).remove();
        }
    });
});​

Answer 2

別のブロックから値変数を最初に定義した場所に参照しようとしています: 範囲外です。var value = $(this).val();if ステートメントの外に移動する必要があります。

Answer 3

あなたが望むことを行うためのはるかにエレガントな方法は次のとおりです。

$(document).ready(function(){
     var element;
     $('.checked_locations').click(function(){
        if ($(this).is(':checked'))
        {
            var value = $(this).val();
            element= $('#locations_filter').append("<div id='hidden_"+value+"'><input type='hidden' name='loc_filter[]' value='"+value+"' /></div>");
        }
        else
        {
            //alert('not checked');
            element.remove(); 
        }
    });

});

これはクロージャーであり、動的言語で可能な非常に強力な手法です。JavaScript で本格的な開発を行う予定がある場合は、よく学習することをお勧めします。

Answer 4

このコードを使用してください：

$('#hidden_'+value).remove(); 

要素 ID は一意でなければならないため、一意のアイテムを参照することになります。

Answer 5

else
{
    var value = $(this).val();
    $('#locations_filter #hidden_'+value).remove(); 
}