Delete The Field From The List in SharePoint 2010 Using ECMAScript


In this article you will see how to delete the field from a list in SharePoint 2010 using ECMAScript. I have a list named "List Request" which has the following fields (Navigate to the list, click on List tab in the ribbon interface. Click on List Settings button).


I am going to delete the field named "Choice" from the "List Request" list using ECMAScript.

Steps Involved 

Step 1 : 
Navigate to the SharePoint site (I have a site page created in my site where I am going to add the content editor web part).

  •  Go to Site Actions, click on Edit Page.


Step 2 : Click on Insert tab in the ribbon interface and then click on Web Part button.


Step 3 : Select Media and Content in the Categories section and then click on Content Editor.


Step 4 : Click on Add.

Step 5 : Content editor web part will be added to the site page.

Step 6 : Click on down arrow and then click on Edit Web Part.


Step 7 : Click on "Click here to add new content".


Step 8 : Click on Format Text tab in the ribbon interface and then click on HTML drop down.


Step 9 : Click on Edit HTML source.

Step 10 : The HTML source window will pop up.


Step 11 : Copy and paste the following script.

Code :

<content id="Main" contentplaceholderid="PlaceHolderMain" runat="server"></content>
    <script language="ecmascript" type="text/ecmascript">
        var fieldCollection;
        var field;
        var list;
        function deleteField() {
            var clientContext = SP.ClientContext.get_current();
            if (clientContext != undefined && clientContext != null) {
                var webSite = clientContext.get_web();
                this.list = webSite.get_lists().getByTitle("List Request");
                this.fieldCollection = list.get_fields();
                this.field = fieldCollection.getByTitle("Choice");
                clientContext.executeQueryAsync(Function.createDelegate(this, this.OnLoadSuccess), Function.createDelegate(this, this.OnLoadFailed));
        function OnLoadSuccess(sender, args) {
            alert("Field deleted successfully.");
        function OnLoadFailed(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    <input id="btndeleteField" onclick="deleteField()" type="button" value="Delete the field"

Step 12 : Click on Ok.

Step 13 : In the ribbon interface click on Save & Close button.


Step 14 : In the content editor web part you can find a button named "Delete the field", click on that button.

Step 15 :
An alert will pop up.



SP.Field.deleteObject() Method -


Thus in this article you have seen how to delete the field from the list in SharePoint 2010 using ECMAScript.