Hiding the New Toolbar Button in SharePoint with jQuery

Another quick little fun thing today. Many times you might want (need) to hide the “New” button on a list toolbar. You know the one I mean?

image

Why would you want to do such a thing? For example on a project I’m building I actually call the NewForm.aspx page with a querystring because I want to pre-populate my form with some vales. As such, I don’t want users to create new items in a list without these references and since they have to come from another list I’m left with the problem of trying to restrict them from creating new items but still offer them the ability to use the features of the list like alerts, exporting to spreadsheets, etc. Yes, the “New” button isn’t available for readers of a list but for contributors it is and for admins you can’t just turn some of this stuff off easily.

If you do some Googling you’ll find some ways to do it. Some want you to modify the list schema, others have C# code to hide it, an others even want you to crack open SharePoint designer and butcher your AllItems.aspx page. Bazooka to kill a mosquito solution IMHO.

Here’s another simple way to do it with your Swiss Army knife, jQuery.

Ingredients

  • jQuery (either installed on your server or remotely and referenced in a master page or via a Content Editor Web Part)
  • 1 Content Editor Web Part
  • 1 lines of jQuery/JavaScript

First you’ll need to have a list to modify. In this case I’ll use a Task list, but any list or library will do. Next go to the view page for the list that you want to do this on.

Click on Edit Page in the Actions menu and you’ll be allowed to add and edit web parts on the view page. This was a feature Microsoft smartly added and is fully supported. Now we can start adding our jQuery love.

Click on Add Web Part, browse for the CEWP and drop it on the page. Make sure you place it below the list form and also mark it as “Hidden” in the Layout options. This keeps the page looking as clean as it was originally.

If you inspect the HTML of any toolbar, it’s basically composed of something like this:

<table class=”ms-menutoolbar”>
<tr>
<td class=”ms-toolbar”>[toolbar item]</td>
<td class=”ms-separator”>[separator image]</td>
<td class=”ms-toolbar”>[toolbar item]</td>
<td class=”ms-separator”>[separator image]</td>
<td class=”ms-toolbar”>[toolbar item]</td>
<td class=”ms-separator”>[separator image]</td>
[etc.]
</tr>
</table>

We want to hide the first couple of <TD> elements which contain the “New” button as well as the separator. We can do this easily with this little nugget of jQuery:

<script src="/Javascript/jquery/jquery.js"></script>
<script>
    $(document).ready(function(){
        $('.ms-menutoolbar td:lt(4)').hide();
    });
</script>

Add that to your CEWP you added to the NewForm.aspx page and you get this:

image

fooP! The “New” button disappears.

Sidenotes

The jQuery is super simple here (I try to write as little code as possible). When the document loads, find the toolbar class (‘.ms-menutoolbar’) then find the first 3 <TD> tags and hide them. One thing to note, when I wrote this today at work I was on IE7 and there were only 2 <TD> tags to hide (thus my jQuery selector was “td:lt(3)”). When I wrote this post I did so hitting my site using FireFox and lo and behold there seems to be an additional <TD> tag. In any case, you might have to experiment with the selectors to get the right number depending on your setup.

There are always many ways to do things in SharePoint. This is just one of them. I suppose you could also find the “id” of the buttons and remove/hide them but SharePoint IDs are always cryptic and not guaranteed to be the same from list to list, page to page, and site to site. I just find this method easy and low impact. YMMV.

18 Comments

  • simple, cool, useful

  • How would you hide the Settings button?

  • Bil - Not sure why you're using jQuery to handle this when a simple css in a CEWP will do the same thing:

    .ms-splitbutton{
    display: none;
    }

    Regards,
    Mark

  • Excellent solution. Thank you very much.

  • Why isn't this working for me? I'm trying to apply your JQuery script in a CEWP below a custom list (not the standard DL). Thanks,

  • excellent and simple ,very useful solution .

  • Can u please provide more details on how this can be acheived. i didn't actually get what u mean by
    jQuery (either installed on your server or remotely and referenced in a master page or via a Content Editor Web Part)

    normally i had tried jquery after adding it a document library and later referring the path from it.......

    Thanks for the post

  • Very easy and useful "Hiding the New Toolbar Button in SharePoint with jQuery ".Thank you so much for giving out this information with the public.

  • Mark Miller's solution works great, is simple and I can easily train my Sharepoint admins to implement anytime they want to hide the "New" button. Thanks Mark!

  • I like Mark Miller's solution for but It works too well, I have a document library and it hides the the New and Upload button I only want to hidethe new button, any ideas ?

  • Where should I write this JQuery as i wrote it in the "Source Editor" of Content Query Web Part but it is not working and I am using IE 6

  • how can i hide settings button?

  • To hide just the Upload button, the following entered into a CEWP worked for me (I had to use Firefox to edit the CEWP, IE kept giving me a "Cannot Retrieve Properties at this time" error):

    [style type="text/css"]
    table#zz15_UploadMenu_t {
    display: none !important;
    }
    table#zz19_UploadMenu_t {
    display: none !important;
    }
    table#zz20_UploadMenu_t {
    display: none !important;
    }
    [/style]

    With angle brackets replaced, of course. The zz15_ got rid of the Upload button in Chrome only for me, the zz19_ took care of IE, and finally the zz20_ hid it in FF too.

  • Dave D's CEWP solution worked for me with "zz17_" for IE. Sorry, for earlier comment (ignore that). Thanks.

  • This worked great for me to hide the Upload button, but how do I find the reference to hide the Actions Button? I am trying to prevent users from seeing others files. I used the filter and [Me] to stop web view but the actions button explorer view still allows them to see what else is in there. SP2007

  • How do you hide the Action button or more importantly hide the Open in Explorer feature for a website.
    Regards, John

  • where to put the jquery file.

  • Hi
    I am using SharePoint 2010.
    I have list A and list B in two webparts, I have connected both webparts using webpart connections.
    So when I select the connection link in list A it filters the items in List B baesd on ID.

    Now I want to customize list B to restrict end user to add only one item for one ID of list A.
    i.e., List A - List B
    AID001 - BID001
    AID002 - BID002
    At the moment I can add one or more items in List B for list A i.e.,
    AID001 - BID001, BID002, BID003 ...
    So I should be restricted to add only 1 item in list B associated to list A item , once the user add one item in List B then the " Add new item " should disappear.

    Thanks

Comments have been disabled for this content.