Removing Fellow & Sync buttons using javaScript worked well, while it will fail to hide the share Button

Question

I have wrote the following three scripts at the end of my master page, to remove the Fellow,Sync and Share buttons:-

<script type= "text/javascript">
_spBodyOnLoadFunctionNames.push("HideBrandingsuite");
function HideBrandingsuite()
{
document.getElementById('site_follow_button').style.visibility = 'hidden';
}
</script>
<script type= "text/javascript">
_spBodyOnLoadFunctionNames.push("HideBrandingsuite2");
function HideBrandingsuite2()
{
document.getElementById('ctl00_SyncPromotedAction').style.visibility = 'hidden';
}
</script>
<script type= "text/javascript">
_spBodyOnLoadFunctionNames.push("HideBrandingsuite3");
function HideBrandingsuite3()
{document.getElementById('ctl00_site_share_button').style.visibility = 'hidden';
}
</script>

This will remove the sync and fellow buttons, but still the Share button appear, although when I used the developer tool inside IE it mentioned that the Share button id is = 'ctl00_site_share_button' as mentioned inside my code ? Any idea how to hide the Share button??

Answer 1

I prefer using css rather than javascript.

In your custom css file put this line to hide the buttons:

#RibbonContainer-TabRowRight a[id$="_SyncPromotedAction"] 
{
   display: none !important;
}

#RibbonContainer-TabRowRight a[id$="_share_button"] 
{
   display: none !important;
}

It should work

Answer 2

You can hide them by using below javascript

$(document).ready(notRequiredElement);

function notRequiredElement() {
    $("a[id$='_share_button']").css("display", "none");
    $("a[id$='_SyncPromotedAction']").css("display", "none");

}

Where id$='_share_button' represent any element that end with _share_button

You can find more selector http://api.jquery.com/category/selectors/