How to detect if clicked element was not a child of an element in jQuery?

Question

I have a nested list in WordPress that when clicked, it will filter products accordingly.

This is how the code looks:

<ul class="woof_list woof_list_radio">

  <li class="woof_term_224">
    <label class="woof_radio_label " for="woof_unselect">Parent Category 1</label>

    <ul class="woof_childs_list woof_childs_list_224">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 1</label>
      </li>
    </ul>
  </li>

  <br>

  <li class="woof_term_225">
    <label class="woof_radio_label " for="woof_unselect">>Parent Category 2</label>

    <ul class="woof_childs_list woof_childs_list_225">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 2</label>
      </li>
    </ul>
  </li>

  <br>

  <li class="woof_term_226">
    <label class="woof_radio_label " for="woof_unselect">>Parent Category 3</label>

    <ul class="woof_childs_list woof_childs_list_226">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 3</label>
      </li>
    </ul>

  </li>

</ul>

• Parent Category 1
o Sub Category 1
• Parent Category 2
o Sub Category 2
• Parent Category 3
o Sub Category 3

I have selector for the clicked element.

j(document).on('click', '.woof_list_radio .woof_radio_label', function(e) {

});

If I click Sub Category 1 <label> element which is a child of <li class="woof_term_224"> then I clicked Parent Category 2 <label> element, do you know how can I detect if the clicked <label> was not a child of <li class="woof_term_224"> or detect that it was clicked outside its parent ?

Answer 1

You can check to see if the target element (the element that was clicked) .matches the selector string for descendants of .woof_term_224 :

 $(document).on('click', '.woof_list_radio .woof_radio_label', ({ target }) => { if (target.matches('.woof_term_224 *')) console.log('Clicked on child of 224') else console.log('Clicked on something outside of 224'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="woof_list woof_list_radio"> <li class="woof_term_224"> <label class="woof_radio_label " for="woof_unselect">Parent Category 1</label> <ul class="woof_childs_list woof_childs_list_224"> <li class="woof_childs_list_li"> <label class="woof_radio_label">Sub Category 1</label> </li> </ul> </li> <br> <li class="woof_term_225"> <label class="woof_radio_label " for="woof_unselect">>Parent Category 2</label> <ul class="woof_childs_list woof_childs_list_225"> <li class="woof_childs_list_li"> <label class="woof_radio_label">Sub Category 2</label> </li> </ul> </li> <br> <li class="woof_term_226"> <label class="woof_radio_label " for="woof_unselect">>Parent Category 3</label> <ul class="woof_childs_list woof_childs_list_226"> <li class="woof_childs_list_li"> <label class="woof_radio_label">Sub Category 3</label> </li> </ul> </li> </ul> 

Answer 2

You can check the length of the closest with class woof_term_224 to determine that. You can try the following way by changing the selector to:

$(document).on('click', '.woof_list_radio > [class^=woof_term_]', function(e) {

Code Example:

 $(document).on('click', '.woof_list_radio > [class^=woof_term_]', function(e) { let len = $(this).closest('.woof_term_224').length; if(len) console.log('The child'); else console.log('Not the child'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="woof_list woof_list_radio"> <li class="woof_term_224"> <label class="woof_radio_label " for="woof_unselect">Parent Category 1</label> <ul class="woof_childs_list woof_childs_list_224"> <li class="woof_childs_list_li"> <label class="woof_radio_label">Sub Category 1</label> </li> </ul> </li> <br> <li class="woof_term_225"> <label class="woof_radio_label " for="woof_unselect">>Parent Category 2</label> <ul class="woof_childs_list woof_childs_list_225"> <li class="woof_childs_list_li"> <label class="woof_radio_label">Sub Category 2</label> </li> </ul> </li> <br> <li class="woof_term_226"> <label class="woof_radio_label " for="woof_unselect">>Parent Category 3</label> <ul class="woof_childs_list woof_childs_list_226"> <li class="woof_childs_list_li"> <label class="woof_radio_label">Sub Category 3</label> </li> </ul> </li> </ul> 

You can find the parent class of the clicked element in the following way:

 $(document).on('click', '.woof_list_radio > [class^=woof_term_]', function(e) { let parentClass = $(this).closest('[class^=woof_term_').prop('class'); console.log('Element is the child of class',parentClass); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="woof_list woof_list_radio"> <li class="woof_term_224"> <label class="woof_radio_label " for="woof_unselect">Parent Category 1</label> <ul class="woof_childs_list woof_childs_list_224"> <li class="woof_childs_list_li"> <label class="woof_radio_label">Sub Category 1</label> </li> </ul> </li> <br> <li class="woof_term_225"> <label class="woof_radio_label " for="woof_unselect">>Parent Category 2</label> <ul class="woof_childs_list woof_childs_list_225"> <li class="woof_childs_list_li"> <label class="woof_radio_label">Sub Category 2</label> </li> </ul> </li> <br> <li class="woof_term_226"> <label class="woof_radio_label " for="woof_unselect">>Parent Category 3</label> <ul class="woof_childs_list woof_childs_list_226"> <li class="woof_childs_list_li"> <label class="woof_radio_label">Sub Category 3</label> </li> </ul> </li> </ul>