Home JQuery on click area – don't trigger click event when clicking specific child element?

Questions

JQuery on click area – don't trigger click event when clicking specific child element?

June 6, 2022

I have an HTML block that has a little X icon in the corner. When the user clicks within this area I call a function, but I DON’T want to call this function when clicking the X that sits within that area. Here’s my example simplified:

html:

<ul id="team_members">
    <li class="member">
        <span>Some text</span>
        <span>Some text</span>
        <span>Some text</span>
        <i class="icon-remove"></i>
    </li>
</ul>

jquery:

$("#team_members").on('click', ".member:not(.icon-remove)", function(e) {
    //some code
    alert("clicked!");
 });

What I am hoping will happen, is that clicking anywhere in the "member" <li> will trigger my onclick function but when I click the "icon-remove" the function will NOT be triggered, as I want a different function to trigger there.

>Solution :

The issue with your code is that you are matching a .member element which is not .icon-remove where what you want is a child of .member which is not .icon-remove. So you just need a space between .member and :not(.icon-remove) in the selector:

$("#team_members").on('click', ".member :not(.icon-remove)", function(e) {
    //some code
    alert("clicked!");
 });
 
$("#team_members").on('click', ".member .icon-remove", function(e) {
    //some code
    alert("deleted!");
 });

.icon-remove:after {
  content: 'delete';
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="team_members">
    <li class="member">
        <span>Some text</span>
        <span>Some text</span>
        <span>Some text</span>
        <i class="icon-remove"></i>
    </li>
</ul>