SharePoint: Delete item in List or Document Library using SPServices jQuery library

Introduction

In my previous article, How to insert multiple items in SharePoint List or Document Library using SPServices jQuery library in SharePoint, we already explained about $().SPServices.UpdateListItems operation to access the listing of the folder.

For example, in SharePoint online site, we need to delete item in SharePoint List or Document library on the basis of the key field when the user clicks on the button. 

To implement above requirement, we can not use the SharePoint Server Side code, so we need to utilize the Client Side Scripting - JSOM/Call to SharePoint REST API using JQuery/Use of SPServices JQuery Library.

Now, we are going to explain how to delete item in SharePoint List or Document Library using SPServices jQuery library in SharePoint. SPServices JavaScript Library "($().SPServices)" provides function called "UpdateListItems" to delete content in the SharePoint list.

Code

Delete item the SharePoint Document Library or List using $().SPServices.UpdateListItems operation with batchCmd option:

$().SPServices({
 operation: "UpdateListItems",
 async: false,
 listName: "AmitKumar_TestList",
 batchCmd: "Delete",
 ID: 3,
 completefunc: function(xData, Status) {
 console.log('List items has been deleted');
 }
});

In the above code block, we are not using updates attributes of "UpdateListItems" operation, instead of using the batchCmd attribute to delete the row on the basis of ID.

Delete item in SharePoint List using $().SPServices.UpdateListItems operation with CAML query:

var id = 1;
var camlQuery = "<Batch OnError='Continue' >" +
 "<Method ID='1' Cmd='Delete'>" +
 "<Field Name='ID'>" + id + "</Field>" +
 "</Method>" +
 "</Batch>";
 
var objPromise = $().SPServices({ 
 operation: "UpdateListItems", 
 async: false,
 listName: "AmitKumar_TestList",
 updates: camlQuery
});
p.done({
 // Manage success or failure here
});

In the above code block, we are using updates attributes of "UpdateListItems" operation to delete item in SharePoint list.

Delete file in SharePoint Document Library using $().SPServices.UpdateListItems operation with CAML query:

var id = 1;
var fileRef = "http://amitkumarmca04.blogspot.com/AmitLib/amitkumar.doc";
var camlQuery = "<Batch OnError='Continue' >" +
 "<Method ID='1' Cmd='Delete'>" +
 "<Field Name='ID'>" + id + "</Field>" +
 "<Field Name='FileRef'>" + fileRef + "</Field>" +
 "</Method>" +
 "</Batch>";
 
var objPromise = $().SPServices({ 
 operation: "UpdateListItems", 
 async: false,
 listName: "AmitKumar_TestList",
 updates: camlQuery
});
p.done({
 // Manage success or failure here
});

In the above code block, we are using extra field called "FieldRef" with "ID" field to delete document from SharePoint document library.

In both cases, we are passing an update, which contains a batch. We can request multiple actions in the batch.

Delete multiple items in SharePoint list using $().SPServices.UpdateListItems operation with CAML query:

//--Sample of creating array of rows--::Start::------------//
var objArrColumns = [];
var objArrRows = [];
 
//---First Row Details :: Start::------------//
var objColumnDetails = new Object();
//--ID column details
objColumnDetails.FieldName =  "ID";
objColumnDetails.FieldValue = 1;
objArrColumns.push(objColumnDetails); //--Add details to column array
 
objArrRows.push(objArrColumns)//--Add details to Row array
//---First Row Details :: End::------------//
 
//---Second Row Details :: Start::------------//
objArrColumns = null;
objArrColumns = [];
//--ID column details
objColumnDetails = null;
objColumnDetails = new Object();
objColumnDetails.FieldName = "ID";
objColumnDetails.FieldValue = 2;
objArrColumns.push(objColumnDetails); //--Add details to column array
 
objArrRows.push(objArrColumns)//--Add details to Row array
//---Second Row Details :: End::------------//
 
//--Sample of creating array of rows--::Start::------------//
 
var camlQuery = "<Batch OnError='Continue'>";
for(var i=0;i<objArrRows.length;i++)
{
  
 for( j=0;j<objArrRows[i].length;j++)
 {
 console.log(objArrRows[i][j].FieldName + "***" + objArrRows[i][j].FieldValue)
 camlQuery += "<Method ID='"  + (i + 1) + "' Cmd='" + "Delete" + "'>";
 camlQuery += "<Field Name='" + objArrRows[i][j].FieldName +"'>"  + objArrRows[i][j].FieldValue + "</Field>";
 camlQuery += "</Method>";
 }
  
}
camlQuery += "</Batch>";
//-- Output would be
//camlQuery = "<Batch OnError='Continue'><Method ID='1' Cmd='Delete'><Field Name='ID'>1</Field></Method><Method ID='2' Cmd='Delete'><Field Name='ID'>2</Field></Method></Batch>"
//--In simple way
/*
var camlQuery ="<Batch OnError='Continue'>" +
 "<Method ID='1' Cmd='Delete'>" +
 "<Field Name='ID'>1</Field>"+
 "</Method>" +
 "<Method ID='2' Cmd='Delete'>" +
 "<Field Name='ID'>2</Field>"+
 "</Method>" +
 "</Batch>";
*/
 
 function  DeleteMultipleItems (){
  
 var objPromise = $().SPServices({
 operation: "UpdateListItems",
 async: false,
 listName: "AmitKumar_TestList",
 updates: camlQuery ,
 });
  
 return objPromise;
 }

In the above code block, we are using batch command to perform delete action on multiple rows.