Unable to hide a component on vf page using JavaScript

In my opinion, using jQuery would be best and easiest, as you can simply do this:

$("[id$=phoneid]").hide();

This will not break if someone changes the markup of the page, since it just uses the id of the apex:inputField.

If you're looking to have the inputfield hidden on page load, you can add the CSS class 'hidden' to the tag directly. Salesforce pages all have this class defined within their stylesheets.

<apex:page id="pageid" standardcontroller="account">
  <apex:form id="formid">
      <apex:pageblock id="pbid">
          <apex:pageblocksection id="pbsid">
              <apex:inputfield id="phoneid" value="{!account.phone}" styleClass="hidden" />
          </apex:pageblocksection>
      </apex:pageblock>
  </apex:form>
</apex:page>

If you want to ensure future maintainability, you should define your own hidden class within your markup. This will prevent future platform stylesheet changes from changing the behavior of your solution.

<apex:page id="pageid" standardcontroller="account">
    <style type="text/css">
        .hidden { display: none; }
    </style>
    <apex:form id="formid">
        <apex:pageblock id="pbid">
            <apex:pageblocksection id="pbsid">
                <apex:inputfield id="phoneid" value="{!account.phone}" styleClass="hidden" />
            </apex:pageblocksection>
        </apex:pageblock>
    </apex:form>
</apex:page>

If you'd like to hide it with script you can use markup like this, leveraging the $Component global to dynamically retrieve the ID of your inputField in the page hierarchy. Be aware that using this method will allow the inputField to be visible in the browser until the script executes and hides it.

The CSS method above will hide the field as the page is rendered, where the script method will hide it after the script runs. Allowing the user to see the field, even temporarily, isn't the optimal implementation.

<apex:page id="pageid" standardcontroller="account">    
    <apex:form id="formid">
        <apex:pageblock id="pbid">
            <apex:pageblocksection id="pbsid">
                <apex:inputfield id="phoneid" value="{!account.phone}" />
            </apex:pageblocksection>
        </apex:pageblock>
    </apex:form>
    <script>
        document.getElementById('{!$Component.pageid.formid.pbid.pbsid.phoneid}').style.display = 'none';
    </script>
</apex:page>

Documentation: Best Practices for Accessing Component IDs

When using and troubleshooting the $Component markup, be sure to look at the rendered source code for the page in the browser. This should simplify the steps to figure out what's not correct in the VF markup.

If the path to your component is correct, the HTML will have the hierarchical ID in the rendered source. document.getElementById('pageid:formid:pbid:pbsid:phoneid').style.display = 'none';

If the path to the component was not correct and it couldn't be located using what you've provided, the rendered source code will have a blank value where you would expect to see the ID. Like this: document.getElementById('').style.display = 'none';

As Venkatesh said, using.style.display ='none' should be enough, but I see a problem that your layout marking is not flexible, because your js would be broken each time as you or somebody will make changes in layout. As you can see the id for <apex:inputfield component generated by adding ids of all outer component and adding new component to this hierarchy will broke your js. You can try to use html input field instead <apex:inputfield where id would be the same as you wrote in the code.