jQuery/js Removing a dynamically created checkbox

Question

I'm using Eric Hynds jQuery MultiSelect Widget that is being populated from a javascript file. A checkbox is created with label attached under a 'Main' checkbox if a Main is checked. How can I set it up to where the dynamically created checkbox removes if that corresponding Main is unchecked? Please see my fiddle to illustrate my problem http://jsfiddle.net/3u7Xj/76/

$(document).ready(function() {
    $(".multiselect").multiselect({
        header: "Choose up to 5 areas total",
        click: function (event, ui) {
             var number1=$("#dropdown1").children(":checked").length,
                number2=$("#dropdown2").children(":checked").length;

            if (ui.checked && ((number1 + number2 >=2) || $(this).children(":checked").length >= 2)) {
                return false;
            }

            var lbl = ui.value;
            if(ui.checked){
                var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');    
                });
            }
            else {
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').find('div input[id="'+lbl+'"]').parent().remove();
                });
            }

        },
        selectedList:5
    });
});

Something like this?

$("[id^=id]:checked",false).each(function(){
    $(this).nextAll('.holder:first').find('div input[id="'+lbl+'"]').parent().remove();
    }); 

Or

if(ui.checked = false){
            $(this).nextAll('.holder:first').find('div input[id="'+lbl+'"]').parent().remove(); 

          }
            else{};

Answer 1

how about adding this?

$("input[name^=chkMain]").change(function(){
    if($(this).not(':checked')){
        $(this).next('label').next('.holder').html('');
    }
});

http://jsfiddle.net/3u7Xj/77/

is that what you meant?

Answer 2

Try this

else {
    $("[id^=Main]:checked").each(function(){
        $(this).nextAll('.holder:first').find('#' + lbl).parent().remove();
    })
}

Demo

I also added a functionality that unchecks the children of a main if it is unchecked. Remove the code

$(".checkers").click(function() {        
    if(!$(this).is(':checked')) {
        $(this).nextAll('.holder:eq(0)').find('div input').attr("checked", this.checked);
    }
});

if you don't want that functionality. You could also change .attr("checked", this.checked) to .parent().remove() if you wanted to remove the check boxes instead

If you wanted to do the opposite, meaning check the boxes then the Main, you could use the following

var checkedOnes = $('#dropdown1').nextAll('.ui-multiselect-menu').find('ul li input:checked');
for(var i = 0; i < checkedOnes.length; i++) {
    var lbl = checkedOnes.eq(i).attr('value');
    var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
    $("[id^=Main]:checked").each(function(){
        $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');    
    });
}

Updated Demo