hide edit item ribbon in sharepoint online

Question

I wish to hide the edit items ribbon in one of the webpart pages where i am displaying a list view webpart.

I found the solution in this question, I am able to hide the ribbons.

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

The problem is , i am getting some java-script errors in my console when i use the code

The error details are below

MyPage.aspx:751 Uncaught TypeError: Cannot read property 'style' of null
    at hideEdit (MyPage.aspx:751)
    at eval (eval at ProcessOnLoadFunctionNames (init.js:1), <anonymous>:1:34)
    at ProcessOnLoadFunctionNames (init.js:1)
    at ProcessDefaultOnLoad (init.js:1)
    at NotifyEventAndExecuteWaitingJobs (init.js:1)
    at NotifyScriptLoadedAndExecuteWaitingJobs (init.js:1)
    at $_global_core (core.js:1)
    at core.js:1

I tried to manually locate the element in the console using

document.getElementById("Ribbon.ListForm.Display.Manage.EditItem-Large")

and

$('#Ribbon.ListForm.Display.Manage.EditItem-Large')

both are returning null and undefined. I can't figure out this error and how is the above code working?

1. Even if i change the id to something else i was able to hide the ribbons. why is it working?
2. If the above queries are returning null it means the code is incorrect right?

3. Where to get the proper ids of these ribbons?

4. Did MS changed the ids in SharePoint-Online?

UPDATE

The above code achieves the desired functionality but i can't comprehend how. because the element is not present in any of my source code or in console.

So, please explain why it works even though element is absent and way to avoid the error.

EDIT: I tried escaping the . using \. but still the element is not present

Answer 1

It won't work because the ribbon needs time to be loaded. It's better to use CSS here.

You can add:

<style>#Ribbon\.ListForm\.Display\.Manage\.EditItem-Large { display:none }</style>

Answer 2

Change this line

document.getElementById("Ribbon.ListForm.Display.Manage.EditItem-Large");

to

document.getElementById("Ribbon\.ListForm\.Display\.Manage\.EditItem-Large");

You need to escape the . to make the selector work

Answer 3

A the error indicates:

MyPage.aspx:751 Uncaught TypeError: Cannot read property 'style' of null
at hideEdit (MyPage.aspx:751)

your hideEdit() function is trying to get the style property in order to do the hiding. Looking at your function code:

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

We can see that the document.getElementById() function failed to find the object thus returning null. In most cases in JavaScript when this happens, it's because the page load isn't complete. Try encapsulating your action in the $(document).ready() method like this:

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

This way, your function should only execute after the page has fully loaded.

Answer 4

To Hide edit item ribbon in SharePoint online

Use the below script :

$('a[id*="Ribbon.Documents.Manage.EditProperties-Large"]').remove();

To Hide delete item ribbon in SharePoint online

$('a[id*="Ribbon.Documents.Manage.Delete-Medium"]').remove();

Answer 5

Ideally, a setting where a visitor can only add a new list and view their own without being able to make any other edits. Even better, a way to have just a "New" button listed that just popped up a list to edit and save. There is no role with just that option so I have to give them contributor role in order to create a list.

Answer 6

Just use below script to hide the ribbon. It will work.

<script type="text/javascript">
     document.getElementById("s4-ribbonrow").style.display = "none";
</script>

Answer 7

why are you complicating the basic functionality of a SharePoint page? "Permissions" should be significantly easier to manage and is one of SharePoint's core strengths

Solution