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

Question

I have searched multiple different responses for similar issues - not the same and have tried a few different possibilities. (Links will be provided for what I've tried)

Context:

This is a personal project and for the purpose of this task, I am not allowed to touch the HTML code. I am trying to remove a class using JQuery to select its parent class with a selector / method :last-of-type or .last() .

Here is what I have already tried:

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>

and JQuery:

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

The result from that code, is no changes to the HTML... The class still exists and is not removed. I believe the issue here is to do with the selector / method . I originally tried

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

but looking at a bunch of StackOverflow responses, it didn't look possible to do so. jQuery selector with nth-of-type()

I may be searching the wrong thing, so it is possible it is a duplicate - but after hours of searching - I doubt it

CodePen for anyone who wants to try - https://codepen.io/pen/ERjYXO

Answer 1

Can you try this

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

this is my code with your given 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

You can use find method and select direct child > div of your last element. DEMO

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

You could also use selector like this

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

Answer 3

Use this script

$("#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 4

Can you please try this?

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