SPO How to Hide column on Display form for specific group permission?

Question

I want to hide a column for a specific group permission on Display form.

I have found a jQuery code and I have tried to use it but the column still visible to the user that is on this particular group.

I added the code by:settings --> edit the page --> web part --> script editor.

Here is my code:

    <script
  src="https://code.jquery.com/jquery-1.10.1.js"
  integrity="sha256-663tSdtipgBgyqJXfypOwf9ocmvECGG8Zdl3q+tk+n0="
  crossorigin="anonymous"></script>
  <script type="text/javascript" 
  src="mysite/SiteAssets/jquery.SPServices.min.js"></script> 

<script type="text/javascript">
$(document).ready(function() {
  $().SPServices({
    operation: "GetGroupCollectionFromUser",
    userLoginName: $().SPServices.SPGetCurrentUser(),
    async: false,
       completefunc: function (xData, Status) {
       var xml = xData.responseXML.xml;
       var flag = ($(xData.responseXML).find("Group[Name='Dev Site Add-ins Members']").length != -1);
       if (flag)
  {
         var feedbackField = $("input[title=Comments]");
         feedbackField.parent().parent().parent().hide();       
  }
     }
  });
});
</script>

Here is screenshot:

In this screenshot the comments column still visible for this user:

Any idea what I am doing wrong ?

Any help will be greatly appreciated.
Thank you!

Answer 1

Problem:

The code you are using can be used to hide the column from new/edit form (observe the jQuery selector here: $("input[title=Comments]")). You cannot use the same selector in list view to hide the column.

Solution:

Instead of:

var feedbackField = $("input[title=Comments]");
feedbackField.parent().parent().parent().hide();

Use this:

//To Hide Column Header
document.querySelector("div[name^='Comments']").parentElement.style.display = "none";

// To Hide all rows for the Comments column
var tdElementsNodeList = document.querySelectorAll("td[class^='ms-vb-lastCell']");
for(var i = 0; i < tdElementsNodeList.length; i++) {
    tdElementsNodeList[i].style.display = "none";
}

Note:

1. In order to work this code you have to add comments column as a last column in list view.
2. This code will break in Quick Edit mode. So, better you can disable quick edit mode.

Answer 2

I will advise you to use power apps to hide your fields:

PowerApps Form - Hiding fields from certain Users.