JQuery hide button before even shown

There are two dimensions to this question, one is the hiding on the UI and the other persisting the hiding (even after a refresh)

To hide on the UI, you can use the jQuery.hide() function, which is trivial.

To persist the hiding, you will need to proxy it via an actionFunction (equally you could use JS-Remoting via Jquery, but I've chosen actionFunction for the purposes of this illustration) to the controller class, so it can process the Id and possibly, set a field on the Account to hide it in further loads. Now if you want a different behaviour per use (i.e. hidden only for the user who has hidden it, then you will possibly need to create another object, where you will store a user's 'hide' preferences, a user Id - hidden id mapping of sorts)

Here's my illustration using Accounts, where I've implemented the hide behaviour using both jQuery and proxying through actionFunction. You can bolt on the behaviour to persist the hiding in the controller action method which is invoked when Hide is clicked.

Visualforce Page :

<apex:page controller="AccountListController">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>

jQuery.noConflict();

function proxyHideItem(accId){
//uncomment this to hide via jquery, currently hiding via actionFunction
//jquery selector using the class, which is accountId for each row
//jQuery("."+accId).hide();

hideItem(accId);

}
</script>

<apex:form> //action function proxies to controller,which sets visible false

<apex:actionFunction name="hideItem" action="{!hideAccount}" reRender="thePageBlock">
<apex:param id="paramId" name="accToHide" value="" />
</apex:actionFunction>

<apex:pageBlock id="thePageBlock">
<apex:pageMessages/>

<apex:pageBlockSection>
<apex:dataTable value="{!accountList}" var="acc">

//notice how the styleClass is the accountId, to select using Jquery
<apex:column   styleClass="{!acc.accId}"  rendered="{!acc.Visible}">
<apex:facet name="header"><b>Hide</b></apex:facet>
<apex:outputPanel onclick="proxyHideItem('{!acc.accId}');" >Hide</apex:outputPanel> 

</apex:column>

<apex:column   styleClass="{!acc.accId}"  rendered="{!acc.Visible}">
<apex:facet name="header"><b>Id</b></apex:facet>
{!acc.accId}
</apex:column>

<apex:column   styleClass="{!acc.accId}"  rendered="{!acc.Visible}">
<apex:facet name="header"><b>Name</b></apex:facet>
{!acc.accName}
</apex:column>

</apex:dataTable>

</apex:pageBlockSection>

</apex:pageBlock>
</apex:form>

</apex:page>

Controller :

public class AccountListController{

Map<Id, AccountWrapper> accMap = new Map<Id, AccountWrapper>();

public List<AccountWrapper> getAccountList(){
    if (accMap == null || accMap.isEmpty()){
        for(Account acc : [Select Id, Name from Account LIMIT 25]){
            accMap.put(acc.Id, new AccountWrapper(acc));
        } 
    }
    return accMap.Values();
}

//this method is invoked via the action function
public PageReference hideAccount(){

Id accToHide = (Id)ApexPages.currentPage().getParameters().get('accToHide');
System.debug('**************************** Hiding ' + accToHide);
if(accToHide != null)
accMap.get(accToHide).visible = false;

//here is where you can bolt on behaviour to store the account hide event
//either a field on account if hide is global for all users, or a dedicated
//hide object, if the hiding is user specific
return null;
}

//wrapper class to hold the Visible variable, which controls visibility
public class AccountWrapper{

public Account acct {get; set;}

public Id accId {get { return acct.Id ; }}

public String accName {get { return acct.Name ;} }

public boolean visible { get; set; }

public AccountWrapper(Account acc){

this.visible = true;
this.acct = acc;

}
}
}

javascript is case sensitive with shortcuts like jquery so use jQuery instead as your shortcut...

more like:

<script type="text/javascript">
    $.noConflict();
    (function($) {
        // Code that uses jQuery's $ can follow here.
    }(jQuery);
</script>