CODEWITHSUNDEEP
javascriptjqueryhtmlcss
clestcruz
clestcruz

Reputation: 1111

Remove the class from a parent element when clicking from inside the element

I'm trying to figure out how I can remove a class on a parent when clicking within the element itself. Take this code below for example. I have an on-click event that adds a class on the parent or list element. Now if I created a click event within that element in order to remove a parent it will not work since it is inside the parent element.

The javascript will assume that I'm clicking a parent but I'm actually clicking something inside the parent element.

$('ul li').on('click', function() {
    $(this).addClass('parent-class')
})


$('ul li span').on('click', function() {
    $('ul li').removeClass('parent-class')
})
ul li {
    position : absolute;
    cursor : pointer;
}

ul li span {
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li> Parent <br/>
        <span class="remove-parent-class">
            Remove Parent Class
        </span>
    </li>
</ul>

Upvotes: 1

Views: 2145

Answers (3)

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

Is this you are looking for?

$("ul li").click(function(){
  $(this).removeClass("hello")
})
li{
color:green;
}
li.hello{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="hello"> Parent <br/>
        <span class="remove-parent-class">
            Remove Parent Class
        </span>
    </li>
</ul>

Upvotes: 0

Prashant Shirke
Prashant Shirke

Reputation: 1423

You need to use stopPropagation in span event handler to restrict the triggering its parent li click event.

Also use $(this).parent() in the span event handler to gets its specific li else it will remove class for all li in case of multiple li.

$('ul li').on('click', function() {
    $(this).addClass('parent-class')
})


$('ul li span').on('click', function(e) {
    $(this).parent().removeClass('parent-class');
    e.stopPropagation();
})
ul li {
    position : absolute;
    cursor : pointer;
}

.parent-class {
border:1px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li> Parent <br/>
        <span class="remove-parent-class">
            Remove Parent Class
        </span>
    </li>
</ul>

Upvotes: 6

guradio
guradio

Reputation: 15555

$('ul li').on('click', function() {
  $(this).addClass('parent-class')
})


$('ul li span').on('click', function(e) {
  e.stopPropagation();
  $('ul li').removeClass('parent-class')
})
ul li {
  position: absolute;
  cursor: pointer;
}

ul li span {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> Parent <br/>
    <span class="remove-parent-class">
            Remove Parent Class
        </span>
  </li>
</ul>

  1. Use .stopPropagation()

.stopPropagation()

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Upvotes: 2

Related Questions