要素内からクリックするときに親要素からクラスを削除します

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

あなたは、トリガー、親liクリックイベントを制限するspanイベントハンドラでstopPropagationを使用する必要があります。

また、その具体的な他のliを取得し、それが複数のliの場合には、すべてのliのクラスを削除しますにspanイベントハンドラで$(this).parent()を使用しています。

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