In SharePoint 2013, I'm trying to figure out how to hide or disable the Cancel button in the ribbon for the default form (NewForm) for a document library. Looking at the form source, I think this is the HTML element I'm after (ID of Ribbon.DocLibListForm.Edit.Commit.Cancel-Large):

<a class="ms-cui-ctl-large" id="Ribbon.DocLibListForm.Edit.Commit.Cancel-Large" onclick="return false;" href="javascript:;" mscui:controltype="Button" aria-describedby="Ribbon.DocLibListForm.Edit.Commit.Cancel_ToolTip" role="button" unselectable="on"><span class="ms-cui-ctl-largeIconContainer" unselectable="on"><span class=" ms-cui-img-32by32 ms-cui-img-cont-float ms-cui-imageDisabled" unselectable="on"><img class="" style="top: -511px;left: -273px;" unselectable="on" src="/_layouts/15/1033/images/formatmap32x32.png?rev=23"/></span></span><span class="ms-cui-ctl-largelabel" unselectable="on">Cancel</span></a>

I've tried various forms of the jQuery code:


But that doesn't seem to have any effect. I believe I'm able to actually locate the object in the DOM because the code snippet:

var myObj = $('#Ribbon.DocLibListForm.Edit.Commit.Cancel-Large');

... does populate the variable with an object. Also, I tried the .disable() method which interestingly resulted in the error "Object doesn't support property or method 'disable'", so that also leads me to believe I'm able to find the element ... just not hide it.

I've seen server-side solutions to accomplish this posted here, but I'm limited to coming up with something in JavaScript. Any advice is appreciated.

  • What version of jquery are you using? Try $(object).toggle()
    – Mike
    Commented Sep 22, 2014 at 17:30
  • jQuery version is 1.11.1. I tried .toggle() and .css("display", "none"), without any luck, I'm afraid.
    – Shawn
    Commented Sep 22, 2014 at 19:06
  • #s4-ribbonrow { visibility: hidden; } is the code i tried. its working.
    – samolpp2
    Commented Oct 26, 2018 at 11:34

5 Answers 5


here the answer:

<script type="text/javascript">
    function hideEdit() {
        var edit = document.getElementById("Ribbon.ListForm.Display.Manage.EditItem-Large");
        edit.style.display = "none";


Enable/Disable ribbon button based on current item value of a field

  • That seemed to do the trick! :-)
    – Shawn
    Commented Sep 22, 2014 at 21:36
  • great! :) @Shawn Commented Sep 22, 2014 at 21:40

I was able to do this using pure CSS, but had to escape the "." As follows:

<style type="text/css">
#Ribbon\.ListForm\.Display\.Manage\.EditItem-Large  {display:none !important;}
  • The CSS solution seems to be more reliable and easier to work with Commented Nov 8, 2020 at 12:03

Did you mean EditForm.aspx? Cause for Doc libaries there's no NewForm.aspx

To hide it using CSS:

#Ribbon a[id$="Cancel-Large"] {
    display: none !important;

To hide it using jQuery:

$("#Ribbon a[id$='Cancel-Large']").hide();

I would suggest using a combination of both and use remove() instead of hide(). You could add the jQuery script using JSLink or Script editor.

  • Sorry, yes ... it is EditForm.aspx. But this didn't seem to solve it either. However the posting by Andres above seems to work as required.
    – Shawn
    Commented Sep 22, 2014 at 21:38

SharePoint Loads the ribbon at last and your jquery/javascript code to hide the cancel button is executed earlier. Write your code inside settimeout method.


setTimeout(function() { $('#Ribbon.DocLibListForm.Edit.Commit.Cancel-Large').hide(); }, 5000);
  • Sorry, but that doesn't seem to work either. The code where I'm attempting to manipulate this is within a $(document).ready(function() {}); block, which I thought would not execute until the page is loaded (and the fact that my var myObj = $('#Ribbon.DocLibListForm.Edit.Commit.Cancel-Large'); test appears to be finding something would seem to indicate that the object is in the DOM at the time the code executes. But I did try your suggestion to no avail, I'm afraid.
    – Shawn
    Commented Sep 22, 2014 at 19:27


Create a new js file and name it as DetailsView.js. Add the below script to it

window.onload = function () {

if (window.location.href.indexOf("user.aspx?obj") > -1) {

document.getElementById('Ribbon.Permission.Manage.Inherit-Large').style.display = "none";

} };

Here is a post explains well with sample script to do the same on any page. http://www.sharepointcollabs.com/2017/05/hide-ribbon-in-sharepoint-online-using.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.