Entfernen Sie die Klasse von einem übergeordneten Element, wenn Sie innerhalb des Elements klicken

Question

Ich versuche herauszufinden, wie ich eine Klasse auf einem übergeordneten Element entfernen kann, wenn Sie innerhalb des Elements selbst klicken. Nehmen Sie diesen Code zum Beispiel unten. Ich habe ein on-click Ereignis, das eine Klasse auf dem Eltern- oder Listenelement hinzufügt. Wenn ich nun ein click -Ereignis innerhalb dieses Elements erstellt habe, um ein übergeordnetes Element zu entfernen, wird es nicht funktionieren, da es sich innerhalb des übergeordneten Elements befindet.

Das Javascript wird davon ausgehen, dass ich auf ein Elternteil klicken, aber ich bin tatsächlich etwas in das Elternelement klicken.

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

Sie benötigen stopPropagation in span Ereignishandler verwenden, um die Auslösung der Mutter li Click-Ereignis zu beschränken.

verwenden Auch $(this).parent() im span Ereignishandler seiner spezifischen li sonst bekommt, wird es entfernen Klasse für alle li bei mehreren 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. Verwenden .stopPropagation()

.stopPropagation()

Beschreibung: Verhindert, dass das Ereignis die DOM-Struktur aufblubbelt und verhindert, dass alle übergeordneten Handler über das Ereignis benachrichtigt werden.

Answer 3

Sie suchen?

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