删除元素中的最后一个元素的类

Question

我想删除最后一个列表项的类。但是jQuery只在2次点击后删除了两个列表项的类。

我在这做错了什么？为什么jQuery不会只删除最后一个类？如果只有一个包含此类的列表项，则只需删除此类。

$( "#test" ).click(function() {
  $("ul li.visible").last().removeClass( "visible" );
});

a {
  color:blue;
}
.visible {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="test">Click me -> Remove last</a>
<ul>
  <li>Bla
    <ul>
      <li class="visible">Foo
        <ul>
          <li class="visible"> Bar</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 1

它正在从拥有它的最后一个元素中删除该类。但是该元素位于另一个也具有类的元素中，因此它继承了样式（color: red）。如果您执行border之类的操作，这一点很明显：

$( "#test" ).click(function() {
  $("ul li.visible").last().removeClass( "visible" );
});

a {
  color:blue;
}
.visible {
  color:red;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="test">Click me -> Remove last</a>
<ul>
  <li>Bla
    <ul>
      <li class="visible">Foo
        <ul>
          <li class="visible"> Bar</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

如果您不希望后代元素继承样式，则必须修改CSS。例如，您可以使用ul设计color: black元素：

$( "#test" ).click(function() {
  $("ul li.visible").last().removeClass( "visible" );
});

a {
  color:blue;
}
ul {
  color: black;
}
.visible {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="test">Click me -> Remove last</a>
<ul>
  <li>Bla
    <ul>
      <li class="visible">Foo
        <ul>
          <li class="visible"> Bar</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 2

你的代码是正确的。通过更改嵌套元素颜色进行检查。问题是嵌套子项默认继承父样式。虽然类活动被删除，但最后一个元素仍然是红色，因为它是类活动的其他元素的一部分

$( "#test" ).click(function() {
  $("ul li.visible").last().removeClass( "visible" );
});

a {
  color:blue;
}
.visible {
  color:red;
}
.visible .visible{
  color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="test">Click me -> Remove last</a>
<ul>
  <li>Bla
    <ul>
      <li class="visible">Foo
        <ul>
          <li class="visible"> Bar</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>