Удаление класса родителя при нажатии на дочерний элемент

Есть вот такая разметка

<div class="list">'
 <div class="m">1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>

Изначально .list div:not[class="m"] {display: none;}, но при нажатии на .list этот класс получает ещё один класс, допустим .active. А .acive div {display: none !important;}

JQ выглядит примерно так

$('.list').on('click',function(){
 $(this).addClass('.active');
});

Как сделать так, чтобы при нажатии на див с классом m, удалялся класс active, с учётом того, что подобных "списков" (list), может быть несколько и чтобы остальные не "откликались".

Пытался сделать так:

$('.list').on('click',function(){
 var $nav = $(this);
 $nav.addClass('active');
 $(this).find('.m').on('click',function(
  $nav.removeClass('active');
 ));
});

Но это не работает в принципе.