CRUD Operations In SharePoint Using REST API - Delete Operations

The previous blogs demonstrated the “Create”, “Read” and “Update” operations of REST API in SharePoint. This is the last blog of this series and explains the “Delete” operation of a list item.

The previous article demonstrated the “Create”, “Read” and “Update” operations of REST API in SharePoint. This is the last article of this series and explains the “Delete” operation of a list item.

As before, we will start with the assumption that the list in picture “Employee” has some entries in it. We will be deleting the list item based on the ID of the item – you enter the ID, and just click on the “Delete” button to get the list item deleted.

REST Operations in SharePoint – DELETE

Step1

Create a custom list “Employee” as per the schema below. Capture the generated internal names of the columns – you will need it later on.

List Name - Employee

Column NameInternal NameType
NameTitleSingle line of text
Employee IDEmployee_x0020_IDNumber
DepartmentDepartmentSingle line of text
CityCitySingle line of text
Contact NumberContact_x0020_NumberSingle line of text

SharePoint
This is how the list looks in my case.

Step2

Create a web part page, and insert the list “Employee” in any of the web part zones.

Step 3

Next step is the addition of the code. The code can be downloaded from – here. In our case, we will be creating a single page HTML file (i.e. the style, scripts and the body elements will be on a single page, with an internal reference to jQuery.min.js file). The HTML can be added to our page in either of the below ways. For this scenario, we have added a Content Editor Web Part (CEWP) in any of the web part zones and then,

  • Insert the code directly in the CEWP.

  • Upload the HTML and JS file to any document library, and then insert the link to the HTML file in the Content Link as shown below,

    SharePoint  SharePoint

Step 4

Enter the ID you wish to delete, and click on “Delete” button The list item pertaining to that list ID will be deleted. Visuals are shown in the below images.

SharePoint

Step 5

Now make the necessary changes, and click on “Update” button. The change in the list item can be observed now. This concludes the step. Have a look at below Step 6 to understand the code.

SharePoint

Explanatory Step

This step gives a description of the REST API code used in this scenario. The code used is,

  1. var listName = "Employee";  
  2.   
  3. function RemoveListItem() {  
  4.     var myID = $("#numID").val();  
  5.     if ((myID.length < 1) || isNaN(myID)) {  
  6.         alert("Please enter a valid item ID");  
  7.     } else {  
  8.         $.ajax({  
  9.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items(" + myID + ")",  
  10.             type: "POST",  
  11.             contentType: "application/json;odata=verbose",  
  12.             headers: {  
  13.                 "Accept""application/json;odata=verbose",  
  14.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  15.                 "IF-MATCH""*",  
  16.                 "X-HTTP-Method""DELETE",  
  17.             },  
  18.             success: function(data) {  
  19.                 alert("success");  
  20.             },  
  21.             error: function(data) {  
  22.                 alert("failed");  
  23.             }  
  24.         });  
  25.     }  

The delete method can be passed in the X-HTTP-Method-Override header, and the call is made using type/method – “POST”. The override helps avoid browser or client limitations, as well as firewall issues.

"X-HTTP-Method":"DELETE",

As our task here is to update data in SharePoint entity (list in this case), the operation is of type/method - POST

type: "POST",

The success block alerts a “success” string, after which a page refresh takes place, and the updated data can be seen in the list item.

This article can also be found in my personal blog site – SharePoint Surgeon. Happy reading!

Link to the previous articles,