SharePoint 2013 ClientContext : How to DELETE specific list items by MULTIPLE CONDITION filter?

Question

By using SP.ClientContext from Javascript end, below is the code i used to "UPDATE" a list item. Simply:

    var clientContext = new SP.ClientContext( siteURL );
    spList = clientContext.get_web().get_lists().getByTitle( myListName );

    this.spList_ExistingItem = spList.getItemById( itemID );
    spList_ExistingItem.set_item( 'FullName', myFullName );
    spList_ExistingItem.set_item( 'Age', myAge );

    spList_ExistingItem.update();
    clientContext.executeQueryAsync(succeeded_handler, fail_handler);

This allows me to update an list item by querying it by ONE condition which is: getItemById(itemID) here.

Now let's say i want to delete any item which is:

• Age = 30
• Country = US

Then how do i do such query with multiple conditions. And then even to DELETE please?

---

UPDATED

---

According to the answer below, i found the REST API is more easier and cleaner to use for Client/Javascript end, compared to CSOM. (So then, of course i changed all my codes to the REST API way already.)

So the conclusion is, i suggest to use REST API rather than CSOM (SP.ClientContext).

Thanks! :)

Solution

This can be done in two different ways, either by using CSOM/JSOM or via the SharePoint REST API. Since you are using the CSOM/JSOM model in your question, I'll only show you how it's done using that method.

Using CSOM/JSOM

To filter SP.ListItem's on mulitple conditions, there are no single methods that take the arguments as multiple filter fields. Instead, you'll have to resort to using a CAML query to specify the list items you want, as below.

var clientContext = new SP.ClientContext( siteURL );
spList = clientContext.get_web().get_lists().getByTitle( myListName );

//Create a CAML-query with your filter conditions
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><And><Eq><FieldRef Name=\'Age\'/>' + 
    '<Value Type=\'Number\'>30</Value></Eq>
    <Eq><FieldRef Name=\'Country\'/>' + 
    '<Value Type=\'Text\'>US</Value></Eq></And></Where></Query><RowLimit>10</RowLimit></View>');

//The query will return a collection of items matching your conditions
this.collListItem = spList.getItems(camlQuery);

clientContext.load(collListItem);

//Execute the query
clientContext.executeQueryAsync(function () {

    var itemCount = collListItem.get_count();
    //For each list item in the collection, mark it to be deleted
    for (var i = itemCount - 1; i >= 0; i--) {
        var oListItem = collListItem.itemAt(i);
        oListItem.deleteObject();
    };

    //Execute the delete operation
    clientContext.executeQueryAsync(deleteSucceeded, deleteFailed);
}, fail_handler);

Using SharePoint REST API

This method assumes that you use jQuery to be able to do some simple $.ajax() calls and use the promise functionality, since you might have multiple items to delete. It also assumes that you understands how you can use jquery deferred objects to chain asynchronous functions to run in sequence.

The simple idea is to

1. Make a request to the REST api and get all the items matching your filter conditions
2. For each object in the collection returned, make another request that deletes the item, and add the request to an array of requests
3. When all requests are done, do whatever you want!

Note that you might have to modify the REST api call to match your columns. Just use the browser or Postman to check that your request is correct.

---

function getItemsToDelete () {
    //You might have to modify this so it filters correctly on your columns
    var requestUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle(" + myListName + ")/items?$filter=Age eq 30 and Country eq 'US'")

    //Return and ajax request (promise)
    return $.ajax({
        url: requestUrl,
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function(result) {
            $.each(result.d.results, function(index, item){
                //Note that we push the ajax-request to the array
                //that has been declared a bit down
                itemsToDelete.push(deleteItem(item));
            });            
        },
        error: function(error) {
            //Something went wrong when retrieving the list items
        }
    });    
}

function deleteItem (item) {
    //All SP.ListItems holds metadata that can be accessed in the '__metadata' attribute
    var requestUrl = item.__metadata.uri;

    return $.ajax({
        url: requestUrl,
        type: "POST",
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "IF-MATCH": item.__metadata.etag,
            "X-HTTP-Method": "DELETE"
        },
        success: function() {
            console.log("Item with ID " + item.__metadata.id + " successfully deleted!");
        },
        error: function(error) {
            //Something went wrong when trying to delete the item
        }
    });    
}


//Declare an array of deferred objects that hold a delete request
//for each item that is to be deleted
var itemsToDelete = [];

//First get the items to delete
$.when(getItemsToDelete()).then(function () {
    $.when.apply($, itemsToDelete).then(function(){
        console.log("All items are deleted!");
    });
});

---

Some useful sources

jQuery Deferred object CRUD operations on list items with SharePoint REST api