Deleting List Items in SharePoint 2013 Using REST API

'use strict';

var hostweburl;
var appweburl;

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function() {

    // Get the URI decoded URLs.
    hostweburl = 
        decodeURIComponent(
            getQueryStringParameter("SPHostUrl"));
    appweburl = 
        decodeURIComponent(
            getQueryStringParameter("SPAppWebUrl"));
    // Resources are in URLs in the form:
    // web_url/_layouts/15/resource
    var scriptbase = hostweburl + "/_layouts/15/";

    // Load the js file and continue to load the page with information about the list top level folders.
    // SP.RequestExecutor.js to make cross-domain requests

    // Load the js files and continue to the successHandler
    $.getScript(scriptbase + "SP.RequestExecutor.js", execCrossDomainRequest);
});

// Function to prepare and issue the request to get
//  SharePoint data
function execCrossDomainRequest() {
    // executor: The RequestExecutor object
    // Initialize the RequestExecutor with the app web URL.
    var executor = new SP.RequestExecutor(appweburl);

    var metatdata = "{ '__metadata': { 'type': 'SP.Data.TestListListItem' }, 'Title': 'changelistitemtitle'}";

    // Issue the call against the app web.
    // To get the title using REST we can hit the endpoint:
    //      appweburl/_api/web/lists/getbytitle('listname')/items
    // The response formats the data in the JSON format.
    // The functions successHandler and errorHandler attend the
    //      sucess and error events respectively.
    executor.executeAsync({
        url: appweburl +
            "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('TestList')/items(2)?@target='" +
            hostweburl + "'",
        method: "POST",
        body: metatdata,
        headers: { "Accept": "application/json; odata=verbose", "content-type": "application/json; odata=verbose", "content-length": metatdata.length, "X-HTTP-Method": "DELETE", "IF-MATCH": "*" },

        success: function(data) {
            alert("success: " + JSON.stringify(data));
        },
        error: function(err) {
            alert("error: " + JSON.stringify(err));
        }

    });
}

// This function prepares, loads, and then executes a SharePoint query to get
// the current users' information

// Utilities

// Retrieve a query string value.
// For production purposes you may want to use
// a library to handle the query string.
function getQueryStringParameter(paramToRetrieve) {
    var params =
        document.URL.split("?")[1].split("&");
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}

In the code above, the second list item is deleted.

Screenshot

Step 3. While deploying, you will be prompted with the following screen. Press Trust It and proceed with the deployment.

Code Walkthrough

A. Post Method in REST API.

A SharePoint 2013 REST service supports sending POST commands that include object definitions to endpoints that represent collections. In this example, Test List is a custom SharePoint list where list items are updated.

IF-MATCH header

Provides a way to verify that the object being changed has not been changed since it was last retrieved. Or, lets you specify to overwrite any changes, as shown in the following example: "IF-MATCH.

B. Request Executor.JS.

The cross-domain library lets you interact with more than one domain in your remote app page through a proxy. SP.RequestExecutor.js acts as a cross-domain library to fetch or create a SharePoint list from your APP domain.

function execCrossDomainRequest() {
    // executor: The RequestExecutor object
    // Initialize the RequestExecutor with the app web URL.
    var executor = new SP.RequestExecutor(appweburl);
    var metatdata = "{ '__metadata': { 'type': 'SP.Data.TestListListItem' }, 'Title': 'changelistitemtitle'}";
}

SnapShot of the List before running the code.

SnapShot of the List after running the code.

Summary

I hope this article helps you.