Manpreet Singh
- Apr 26, 2019
- 2 min read

How To Delete A Column In A List Using REST API In SharePoint Online And Office 365

Welcome to an article on “How to create columns in a list using REST API in SharePoint Online and Office 365” where we will see the steps of creating an app using Napa Tool which will help us to delete a column in a list using REST API.

Open the “NAPA” Office 365 Development Tools through your SharePoint store.
Click on Add New Project.
It will ask you, what type of app do you want to build?

Select SharePoint Add-in and provide a name to your app and click on Create.

You will see the screen below on the app,

Click on Default.aspx and paste the code below under the

“<asp:ContentContentPlaceHolderID="PlaceHolderMain" runat="server">”.

Code:

<div>
<p>
<b>Delete Column</b>
<br />
<input type="text" id="deletecolumnname" />
<button id="deletecolumn">DeleteColumn</button>
</p>
</div>

Now on the navigation click on the App.js file and paste the code below removing the previous code completely.

Code:

'use strict';
varhostweblink;
varapplink;
// Load the links on app load.
$(document).ready(function()
{
hostweblink = decodeURIComponent(
getQueryStringParameter("SPHostUrl"));
applink = decodeURIComponent(
getQueryStringParameter("SPAppWebUrl"));
//Assign Click event on button
$("#deletecolumn").click(function(event)
{
deletecolumn();
event.preventDefault();
});
varscriptlink = hostweblink + "/_layouts/15/";
$.getScript(scriptlink + "SP.RequestExecutor.js");
});
//function to retrive the clean link
functiongetQueryStringParameter(paramvalue)
{
varparamval = document.URL.split("?")[1].split("&");
for (vari = 0; i < paramval.length; i = i + 1)
{
var paramval1 = paramval[i].split("=");
if (paramval1[0] == paramvalue) return paramval1[1];
}
}
// Delete column
functiondeletecolumn()
{
vardeletecolumnname = document.getElementById("deletecolumnname").value;
var play;
play = new SP.RequestExecutor(applink);
play.executeAsync
({
url: applink + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('DevData')/fields/getbytitle('" + deletecolumnname + "')?@target='" + hostweblink + "'",
method: "POST",
headers:
{
"IF-MATCH": "*", "X-HTTP-Method": "DELETE"
},
success: deletecolumnsuccessful,
error: deletecolumnfail
});
}
functiondeletecolumnsuccessful(data)
{
alert("Column deleted successfully")
}
functiondeletecolumnfail(data, errorCode, errorMessage)
{
alert("Column could not be deleted, see the error here" + errorMessage);
}