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

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

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

还可以$(this).parent()在span事件处理程序中使用li它获取其特定的else,它将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>