CODEWITHSUNDEEP
javascriptjquery
Eric Colgan
Eric Colgan

Reputation: 79

Issue with the jQuery Hide function

In the HTML section show there are a few classes that I'd like to be hidden if a boolean called readOnly is true.

<div class="row">
        <div class="col-lg-12">                
            <div id="point-of-detection" style="display:none;">
                <h4>Point of Detection</h4>
                <div>
                    <ul class="list-inline">
                        <li><div class="btn btn-info" style="width:135px">Process</div></li>
                        <li>
                            <span class="btn btn-xs btn-info" onclick="addProcess($(this).parent().prev());">+</span>
                            <span class="btn btn-xs btn-danger" onclick="removeProcess($(this).parent().prev());">-</span>
                        </li>
                    </ul>
                    <ul class="list-inline">
                        <li><span class="btn btn-danger" style="width:135px">Work Elements</span></li>
                        <li>    

                            <span class="btn btn-xs btn-info" onclick="addWorkElement($(this).parent().prev());">+</span>
                            <span class="btn btn-xs btn-danger" onclick="removeWorkElement($(this).parent().prev());">-</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

In my JS i have been trying this code.

$(document).ready(function () {
console.log("ready!");
$('#drag-1').draggable();
var readOnly = true;
    //$("#readOnly").val();
var testId = $("#Id").val();
//hide all extra small buttons when true? "btn btn-xs btn-default" onclick="addBox($(&quot;#drag-1&quot;));">add</span>
console.log(readOnly + testId);
if (readOnly == true) {
    $('.btn btn-xs btn-default').hide();
    $('.btn btn-xs btn-info').hide();
}
});

So When readOnly is true I want to hide all of these elements 

$('.btn btn-xs btn-default').hide();
    $('.btn btn-xs btn-info').hide();

Is there some kind of issue because it is nested or?

Upvotes: 0

Views: 71

Answers (1)

James Thorpe
James Thorpe

Reputation: 32212

Your selectors are not correct. They should be:

$('.btn.btn-xs.btn-default').hide();
$('.btn.btn-xs.btn-info').hide();

Any time you put a space in a selector, you start talking about descendant elements - in your case you're targeting a non-existent <btn-default> element contained within a non-existent <btn-xs> element inside any element with the .btn class.

In your case, if you only want to target extra small buttons, you should just get away with using that single class:

$('.btn-xs').hide();

This will work on both .btn-default and .btn-info buttons etc.

Upvotes: 3

Related Questions