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