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

时间:2017-06-22 08:28:07

标签: javascript jquery html css

我试图找出如何在单击元素本身时删除父级上的类。以下面的代码为例。我有一个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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:5)

您需要在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>

答案 1 :(得分: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()
  2. .stopPropagation()

      

    描述:防止事件冒泡DOM树,防止任何父处理程序被通知事件。

答案 2 :(得分:0)

这是你要找的吗?

&#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;