Use e.stopPropagation()
to stop bubbling the click event upto the container;
$('ol#browse-files li').click(function (e) {
e.stopPropagation();
if (e.ctrlKey) { //Select multiple files with ctrl
$(this).toggleClass('active');
} else if ($(this).hasClass('active')) {
$(this).toggleClass('active');
} else {
$('ol#browse-files li').removeClass('active');
$(this).addClass('active');
}
});
$(".container").not("ol li").click(function (e) {
$('ol#browse-files li').removeClass('active');
});
Now after selecting some li
when you click on the container(the grey area), the selection will be removed as you desired