當從元素內部單擊時從父元素中刪除類

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>