получить родительский идентификатор класса из клика дочернего класса

Question

У меня есть четыре <div> контейнера, как показано ниже:

 <div class="parentBox">
  <div class="childBox" id="20">
      <div>some content with in this div</div>
      <div>another div with more sontent</div>
  </div>
</div>

Я хочу получить идентификатор childBox в переменную jQuery, когда я щелкаю в любом месте внутри элемента childBox. Я попробовал следующее, которое дает мне undefined

 $('.parentBox').click(function (event) {
    var id = $(this).attr('id');
    console.log(id);
});

, также попробовал это, которое дало мне родитель не является функцией

var id = $(this).parent().attr('id');

, и попробовал это, которое просто дает мне пробелв журнале консоли

var id = event.target.id;

Может кто-нибудь помочь, пожалуйста?

     $('.parentBox').click(function (event) {
        var id = $(this).attr('id');
        console.log(id);
        
        //does not work
        console.log($(this).parnet().attr('id'));
        
        //also does not work
        console.log(event.target.id);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentBox">
      <div class="childBox" id="20">
          <div>some content with in this div</div>
          <div>another div with more sontent</div>
      </div>
    </div>