I am facing some problems in hiding fields from the New and edit forms, if I chose to do so from the Content Type settings and set the column as hidden. As there seems to be some scenarios where these settings will get overridden, such as changing the default value of the hidden field.

So I am now trying to hide columns using jQuery instead, but I am asking what is the best approach to hide columns using jQuery? For example inside my issue tracking's New Form i got a column named "Item number" which I want to hide , so how I can hide it using jQuery ?

The related mark up is :-

<table width="100%" class="ms-formtable" style="margin-top: 8px;" border="0" cellspacing="0" cellpadding="0">
<td width="113" class="ms-formlabel" nowrap="true" valign="top">
<h3 class="ms-standardheader">

<nobr>Item Number</nobr>


<td width="350" class="ms-formbody" valign="top">

<span dir="none"><input title="Item Number" class="ms-long ms-spellcheck-true" id="_x0049_D1_806a702b-1716-47f5-a93c-16067f502daf_$TextField" type="text" maxlength="255" value=""><br></span>

<span class="ms-metadata">Do not customize at the list level</span>


So how I can hide this field? Also I have another form used inside my calendar list and seems there are columns that can not be hidden from the content type such as the All day event check box, so I am thinking of using JavaScript to hide them.


here is a screenshot when i entered "item number" in the Description field:-

enter image description here

4 Answers 4


You can hide the fields by:

 $('nobr:contains("Item Number")').closest('tr').hide();
  • this worked well ...
    – John John
    May 29, 2015 at 14:48
  • but how i can force the selector to be inside the table with .ms-formtable class just to avoid removing other markups..
    – John John
    May 29, 2015 at 14:48
  • 1
    Definitely not. It looks for <nobr> tag and if it contains "Item Number", then it hides the closest tr
    – Keerthi
    May 29, 2015 at 15:15
  • 1
    Is it inside the .ms-formtable class?
    – Keerthi
    May 29, 2015 at 16:11
  • 1
    Good to hear!!!
    – Keerthi
    May 29, 2015 at 16:32

You can try below script which will hide the table

jQuery('input [title="Item Number"]').closest('table').hide();

If you want to hide on input box then use

jQuery('input [title="Item Number"]').hide();


jQuery('input [title="Item Number"]').closest('tr').hide();


        $('.ms-formtable tr').each(function () { 
            $(this).find('td').each(function () { 
                var str_text = $(this).html(); 
                if (str_text.indexOf('Item Number') > -1) { 
  • But i do not want to hide the whole table i just need to hide the related TR which contain the field title and the input field, Second question is there is a more formal approach to use jQuery to hide columns, because what if i rename the field from Item Number to Item No , then in this case the script will not longer works,, while if i hide the column from the content type setting renaming the column will not affect any thing... so does SP provides a formal way to use jquery to do functions such as hide/show column, set defualt values , etc..
    – John John
    May 29, 2015 at 12:12
  • i though i can write a javaScript in a similar way as we write power shell scripts,, where we use strongly typed variables and object..
    – John John
    May 29, 2015 at 12:39
  • In that case you should look into Client Side Rendering using JSLinks May 29, 2015 at 12:40
  • ok now i edited the New form and i add a scriot at the end of the form as follow:- <script> $('input [title="Item Number"]').closest('tr').hide(); </script> but this did not hide any thing...and there is not any errors raised from the script... one final note is that i am adding the scripts to the built-in New forms ...could this be the reason ?
    – John John
    May 29, 2015 at 12:44
  • 1
    See my edited answer. May 29, 2015 at 14:49

If you are using SP 2013, you can use Client Side Rendering to override how the fields are rendered in the new and edit form, and hide them that way.

I have not personally done this (yet), but I know it is a mechanism that is available for customizing forms in 2013.

Here is an article that goes in to CSR for list forms, and here is one that specifically addresses hiding controls.

Because CSR is how SharePoint itself is rendering the forms, and by using this method you are literally overriding the default rendering code, I would say that this is the "formal" way of manipulating forms with Javascript/jQuery.


You can create custom list forms for NewForm.aspx/EditForm.aspx

Check here you can remove the fields which you don't want to display

Only drawback of this implementation is that if you add new column to list you will have to manually add the field to it again or recreate the form

  • yes i know about using custom forms ,, but i do not want to go with this approach as it have some drawbacks i do not want to have,, since in my case i have a site templete and i will be creating many sub sites,,so i do not want to face a problem of modifying all the sub sites forms just becuase we decide to add a new column !!
    – John John
    May 29, 2015 at 12:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.