How to Hide SharePoint Field using jQuery/JavaScript

Hello friends, in this article, we will see how we can Hide SharePoint Field 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 sharepoint 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 field using JavaScript

If you see the first code for hiding SharePoint field on New or Edit forms, we have used the 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).

Hide SharePoint Field
Hide SharePoint Field

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!

Recommended articles:

  1. SharePoint Interview Questions
  2. SharePoint Content Types – Best Explained
  3. SharePoint Site Columns – Best Explained
  4. How to Make Conditionally Mandatory Field in SharePoint 2013

Leave a Reply

Your email address will not be published. Required fields are marked *