How to Hide SharePoint Field using jQuery/JavaScript

Hello friends, in this article, we will see how we can hide SharePoint list column in NewForm.aspx/ DispForm.aspx/ EditForm.aspx

Add a content editor webpart on respective pages (NewForm.aspx/ DispForm.aspx/ EditForm.aspx) and use below JavaScript/jQuery code to hide the field. In this case I am hiding named “Middle Name”.

  1. For NewForm.aspx OR EditForm.aspx

    using jQuery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $('nobr:contains("Middle Name")').closest('tr').hide(); //here we are hiding field named "Middle Name"
    });
    </script>

    using JavaScript

    <script type="text/javascript">
    
    // The new closest
    var closest = function(el, fn) {
      return el && (fn(el) ? el : closest(el.parentNode, fn));
    };
    
    // Get the "starting point" element
    var srcEl = document.getElementById('Middle_x0020_Name');
    
    // `<tr>` is the "ending point"
    var tr = closest(srcEl, function(el) {    
        return el.tagName.toLowerCase() === 'tr';
    });
    
    tr.style.display = "none";
    
    </script>
    
    
  2. For DispForm.aspx

    using jQuery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $('[name="SPBookmark_Middle_x0020_Name"]').closest('tr').hide();
    });
    </script>

    using JavaScript

    <script type="text/javascript">
    
    // The new closest
    var closest = function(el, fn) {
      return el && (fn(el) ? el : closest(el.parentNode, fn));
    };
    
    // Get the "starting point" element
    var srcEl = document.getElementsByName('SPBookmark_Middle_x0020_Name');
    srcEl;
    // `<tr>` is the "ending point"
    var tr = closest(srcEl[0], function(el) {    
        return el.tagName.toLowerCase() === 'tr';
    });
    
    tr.style.display = "none";
    
    </script>

Explanation of code:

How to Hide SharePoint List Column using JavaScript

If you see the first code for hiding SharePoint field on New or Edit forms, we have used a closest function of jquery. We are using <nobr> tag value to find the closest <tr> tag of the field and hiding it. You can refer below screenshot to find the <nobr> value (It’s always same as field display name).

A similar approach is used for remaining codes. I hope you have liked this article. If you have any queries, feel free to ask in the comment section below. Like our facebook page and subscribe to our newsletter for future updates. Have a nice day!