Question

I’m trying here to let a checkbox append a div when it is check and remove the same div when it is uncheck. i believe the problem is when .remove() is called.. I just don’t know what the problem is.
Thanks so much for your help!

    $(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 is undefined in your else statement. Move it’s declaration to outside of the if statement.

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