通过多个类和方法/选择器选择元素来删除类

Question

我已经为类似的问题搜索了多个不同的回复 - 不一样，并尝试了几种不同的可能性。(将提供我尝试过的链接(

上下文：

这是一个个人项目，出于此任务的目的，我不允许触摸HTML代码。我正在尝试使用 JQuery 删除一个类，以使用选择器/方法:last-of-type或.last()选择其父类。

这是我已经尝试过的：

.HTML：

<fieldset>
<div class="form-group">
<div class="col-sm-8 col-sm-12">
<input class="form-control" id="Username" name="Username" title="Username is a required field." type="text" value="" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-12">
<input autocomplete="off" class="form-control" id="Password" name="Password" title="Password is a required field." type="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8 col-sm-12">
<div class="checkbox">
<label>
<input id="RememberMe" name="RememberMe" type="checkbox" value="true">
<span>Remember me?</span>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8 col-sm-12">
<button id="submit-signin-local" class="btn btn-primary" title="Sign In">Sign In</button>
<a class="btn btn-default" role="button" href="/ForgotPassword" title="Forgot Password?">Forgot Your Password?</a>
</div>
</div>
</fieldset>

和 JQuery：

var lastForm = $('.form-group').last();
$(lastForm+' div.col-sm-12').removeClass('col-sm-offset-4');

该代码的结果是没有对 HTML 进行任何更改...该类仍然存在，不会被删除。我相信这里的问题与选择器/方法有关。我最初尝试过

$('.form-group div.col-sm-12').removeClass('col-sm-offset-4');

但是看看一堆 StackOverflow 响应，看起来不可能这样做。 jQuery 选择器 with nth-of-type((

我可能搜索了错误的东西，所以它可能是重复的 - 但经过几个小时的搜索 - 我对此表示怀疑

任何想尝试的人的CodePen - https://codepen.io/pen/ERjYXO

Answer 1

你能试试这个吗

var lastForm = $('.form-group').last();
$('div.col-sm-12', lastForm).removeClass('col-sm-offset-4');

这是我使用您给定的 HTML 的代码

<script type="text/javascript">
var lastForm = jQuery('.form-group').last();
console.log(lastForm);
jQuery('div.col-sm-12', lastForm).removeClass('col-sm-offset-4');
</script>

Answer 2

使用此脚本

$("#submit-signin-local").parent().removeClass('col-sm-offset-4');

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<div class="form-group">
<div class="col-sm-8 col-sm-12">
<input class="form-control" id="Username" name="Username" title="Username is a required field." type="text" value="" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-12">
<input autocomplete="off" class="form-control" id="Password" name="Password" title="Password is a required field." type="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8 col-sm-12">
<div class="checkbox">
<label>
<input id="RememberMe" name="RememberMe" type="checkbox" value="true">
<span>Remember me?</span>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8 col-sm-12">
<button id="submit-signin-local" class="btn btn-primary" title="Sign In">Sign In</button>
<a class="btn btn-default" role="button" href="/ForgotPassword" title="Forgot Password?">Forgot Password?</a>
</div>
</div>
</fieldset>
<script>
$("#submit-signin-local").parent().removeClass('col-sm-offset-4');
</script>

Answer 3

您可以使用find方法并选择最后一个元素的直接子> div。演示

var lastForm=$('.form-group').last();
lastForm.find("> div").removeClass('col-sm-offset-4');

你也可以像这样使用选择器

$(".form-group:last > div").removeClass('col-sm-offset-4');

Answer 4

你能试试这个吗？

var lastForm = $('.form-group').last();
$(lastForm).find(".col-sm-offset-4").removeClass("col-sm-12");