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

Question

我想弄清楚如何在元素本身内单击时删除父类上的类。以下面的代码为例。我有一个on-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

您需要使用stopPropagation在span事件处理程序，以限制触发其父li单击事件。

在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>