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

Question

我试图找出如何在单击元素本身时删除父级上的类。以下面的代码为例。我有一个on-click事件，它在父元素或列表元素上添加了一个类。现在，如果我在该元素中创建了一个click事件以删除父元素，那么它将无法工作，因为它位于父元素内。

javascript会假设我点击了父级，但实际上我点击了父元素中的内容。

＆＃13;

＆＃13;

$('ul li').on('click', function() {
    $(this).addClass('parent-class')
})


$('ul li span').on('click', function() {
    $('ul li').removeClass('parent-class')
})

＆＃13;

ul li {
    position : absolute;
    cursor : pointer;
}

ul li span {
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要在stopPropagation事件处理程序中使用span来限制触发其父li点击事件。

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

这是你要找的吗？

＆＃13;

＆＃13;

$("ul li").click(function(){
  $(this).removeClass("hello")
})

＆＃13;

li{
color:green;
}
li.hello{
color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;