JS ClientContext return undefine when deleteObject

Question

I'm trying to delete a list item from a SharePoint library via JavaScript with ClientContext. Unfortunately I don't have access to the ID of the item that's why I use the Title and I can not delete the List Item. All the time I receive the following error on line with deleteObject:

Uncaught TypeError: undefined is not a function

To use a Title a provide a CamlQuery. If I try to delete it with the comment line everything works perfect, but like I wrote there is no access to the ID of the item.

Here is my code:

function deleteListItemSP(title){

    var siteUrl = 'mylink';

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Demo');

    var query = new SP.CamlQuery();
    query.set_viewXml("<Where><Eq><FieldRef Name=\"Title\"/><Value Type=\"Text\">" + Title+ "</Value></Eq></Where>");

    var oListItem = oList.getItems(query);
    //this.oListItem = oList.getItemById(4);
    oListItem.deleteObject();

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

Any idea what's wrong?

Answer 1

First of all, SP.List.getItems Method returns SP.ListItemCollection object not an SP.ListItem object.

Second, in your case you have to submit first query in order to retrieve item collection and then only to get the item and delete it, for example:

var items = list.getItems(query);
context.load(items);  
context.executeQueryAsync(
  function()
   { 

      if(items.get_count() > 0) {
          var itemToDel = items.getItemAtIndex(0);  
          //delete item goes here...
   },
   function(sender,agrs)
   {
       //error handling goes here...
   }
);

Working example

var url = _spPageContextInfo.webAbsoluteUrl
var listTitle = 'Contacts'; 
var itemValue = 'Manager';


var context = new SP.ClientContext(url);
var list = context.get_web().get_lists().getByTitle(listTitle);

var query = new SP.CamlQuery();
query.set_viewXml("<Where><Eq><FieldRef Name=\"Title\"/><Value Type=\"Text\">" + itemValue + "</Value></Eq></Where>");
var items = list.getItems(query);
context.load(items);
context.executeQueryAsync(
   function()
   { 

      if(items.get_count() > 0) {
          var itemToDel = items.getItemAtIndex(0);
          itemToDel.deleteObject();   
          context.executeQueryAsync(
            function()
            { 
                console.log('Item has been deleted succesfully');
            },
            function(sender,agrs)
            {
               //error handling goes here...
            });
      }   

   },
   function(sender,agrs)
   {
       //error handling goes here...
   }
);

Answer 2

You are attempting to use a SP.ListItem method on a SP.ListItemCollection object. SP.List.getItems() returns a SP.ListItemCollection object. You must iterate through this to get to the items themselves. Try the following:

function deleteListItemSP(title){

    var siteUrl = 'mylink';

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Demo');

    var query = new SP.CamlQuery();
    query.set_viewXml("<Where><Eq><FieldRef Name=\"Title\"/><Value Type=\"Text\">" +
        title+ "</Value></Eq></Where>");

    var oListItems = oList.getItems(query);
    clientContext.load(oListItems);
    clientContext.executeQueryAsync(function() {
        var listItemEnum = oListItems.getEnumerator();
        while(listItemEnum.moveNext()) {
            listItemEnum.get_current().deleteObject();
            clientContext.executeQueryAsync(
            Function.createDelegate(this, this.onQuerySucceeded), 
            Function.createDelegate(this, this.onQueryFailed));
        }
    }, Function.createDelegate(this, this.onQueryFailed));
}

JavaScript is far from my strong point, I'm sure there's a way to get the list item without having to enumerate through them like I did.