removeClass method not working jquery

Question

I'm having a main div container with 4 hidden divs inside it (I created a class in css with display:none, and added it to each of the inner divs) , the main div reads a value from a dropdown list and according to the read value unhides that many divs.

 <div id="ddlContainer">
            <div id="div1" class="hide">
                <center>Select option:</center>
                <select id="ddl1">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div2" class="hide">
                <center>Select option:</center>
                <select id="ddl2">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div3" class="hide">
                <center>Select option:</center>
                <select id="ddl3">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div4" class="hide">
                <center>Select option:</center>
                <select id="ddl4">
                      <!--options are added here-->
                </select>
            </div>
        </div>

But the removeClass isn't working for me.

  var diff, NumofHiddenDDLs = $("#ddlContainer").children().filter("[class=hide]");
        if (ReadValue > NumofHiddenDDLs.length) {
            diff = 1;
        }
        else {
            diff = 2;
        }
        if (diff == 1) {
            //TODO add class hide to shown divs
        }
        else {
            for (var i = 0; i < ReadValue; i++) 
                ($("#ddlContainer").children()[i]).removeClass("hide");
        }

Can anyone tell me what Im doing wrong? Thanks

Answer 1

You need an extra $:

$($("#ddlContainer").children()[i]).removeClass("hide");

This $("#ddlContainer").children()[i] will return the i-th children of the element with id ddlContainer, which would would be an html element and not a jQuery object. So you want have access to the jQuery methods. By wrapping this with a $ you will have a jQuery object and you will have access to the removeClass method.

Another way of achieving the same result is to make use Satpal answer, in which instead of accessing the array of children with an index to make use of the eq method and to get a jQuery object that would contain the element you want.

Answer 2

Problem with your implementation is that ($("#ddlContainer").children()[i]) returns DOM element and they don't have removeClass() method.

You should use .eq(index) to get the desired element then use removeClass()

$("#ddlContainer").children().eq(i).removeClass("hide");

Answer 3

You can make use of lt selector and remove for loop -

$("#ddlContainer").children(":lt(" + ReadValue + ")").removeClass("hide");

Check out below demo version where I have hide CSS class (with background-color RED) and removing it for index less than 3 -

$(function(){
  $("#ddlContainer").children(":lt(3)").removeClass("hide");
});

.hide {
 background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ddlContainer">
            <div id="div1" class="hide">
                <center>Select option:</center>
                <select id="ddl1">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div2" class="hide">
                <center>Select option:</center>
                <select id="ddl2">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div3" class="hide">
                <center>Select option:</center>
                <select id="ddl3">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div4" class="hide">
                <center>Select option:</center>
                <select id="ddl4">
                      <!--options are added here-->
                </select>
            </div>
        </div>

Answer 4

When you have i-th element, simply use pure js functionality classList

$("#ddlContainer").children()[i].classList.remove("hide")

Notice: by this scenario, you won't create additional object in in each step