从元素内部单击时，从父元素中删除类

Question

我试图弄清楚如何在元素本身内单击时删除父类上的类。 以下面的代码为例。 我有一个on-click事件，在父元素或列表元素上添加了一个类。 现在，如果我在该元素内创建了click事件以删除父元素，则该事件将不起作用，因为它位于父元素内。

javascript将假定我单击父级，但实际上单击父级元素内的某些内容。

 $('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> 

Answer 1

您需要在span事件处理程序中使用stopPropagation来限制触发其父li click事件。

还可以在span事件处理程序中使用$(this).parent()来获取其特定的li否则，如果有多个li ，它将删除所有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> 

Answer 2

 $('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. 使用.stopPropagation()

.stopPropagation（）

说明：防止事件使DOM树冒泡，从而防止任何父处理程序收到该事件的通知。

Answer 3

这是您要找的吗？

 $("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>