Hide label of inputfield in visualforce page using jQuery

Question

I can get the visualforce page to hide the input field but I'm unsure how to hide the associated label. How can I hide the label as well?

                <apex:inputField value="{!Fiscal_Year__c.name}" onclick="test();"/>
                <apex:pageBlockSectionItem id="isCurrentQ">
                    <apex:outputLabel value="is Current" for="isCurrent"/>
                    <apex:inputField value="{!Fiscal_Year__c.Is_Current__c}" id="isCurrent"/>
                </apex:pageBlockSectionItem>

                </apex:pageBlockSection>
        </apex:pageblock>
    </apex:form>

<apex:includeScript value="{! $Resource.jQuery }"/>
<script type="text/javascript">
    function test(){
        $('[id$="isCurrentQ"]').hide();
     }
</script>

Answer 1

Once sure fire way to remove the labels is to put your apex:inputField inside a tag

Like so:

<apex:pageBlockSection id="yearInfoPageBlock" title="Fiscal Year Information">

    <apex:pageBlockSectionItem>
        <apex:inputField value="{!Fiscal_Year__c.name}" onclick="test();"/>
    </apex:pageBlockSectionItem>
    <apex:pageBlockSectionItem>        
        <apex:inputField value="{!Fiscal_Year__c.Is_Current__c}" id="isCurrent"/>
    </apex:pageBlockSectionItem>

</apex:pageBlockSection>

Give it a try!

Oh right.. re-reading your question, that might not be what you are trying to achieve.

If you are trying to "hide" the whole input thing with a bit of Javascript. I would recomment wrapping them in output panels, and then calling "hide" on those.

<apex:pageBlockSection id="yearInfoPageBlock" title="Fiscal Year Information">

    <apex:inputField value="{!Fiscal_Year__c.name}" onclick="test();"/>

    <apex:outputPanel Id="isCurrent"> 
        <apex:inputField value="{!Fiscal_Year__c.Is_Current__c}" id="isCurrent"/>
    </apex:outputPanel>

</apex:pageBlockSection>

<apex:includeScript value="{! $Resource.jQuery }"/>
    <script type="text/javascript">
        function test(){
            $('[id$="isCurrent"]').hide();

            $('[id$="isCurrent"]').hide();
        }
    </script>

Also: are you familiar with the "rendered" tag on all elements, which you can use to control their display (both label and input in the case of form elements) from your Apex controller/other formulaic values?

Answer 2

Figured it out: Set a dataStyleClass on the apex:pageBlockSectionItem.

here is the VF

<apex:pageBlock>
    <apex:pageBlockSection>
        <apex:pageBlockSectionItem dataStyleClass="page-block-section-item">
            <apex:outputLabel value="My nice field" for="myField"/>
            <apex:inputCheckbox value="{!dummy}" id="myField" styleClass="myField"/>
        </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
</apex:pageBlock>

You can hide the page block section item just by selecting the tag by class then using the parent method.

$('td.page-block-section-item').parent().hide();