The objective here is to delete a single or multiple ListItems from a single SharePoint List using a ListView WebPart i.e., to delete a ListItem from client side. In order to achieve this, we will be making an ajax call to the SharePoint WebService, Lists.asmx. SharePoint provides a number of WebServices with various functionalities. One of them is Lists.asmx. This service has many apis related with SharePoint List. We’re gonna call UpdateListItems api with the Delete command to delete a single or multiple ListItems accordingly. The url of this service is kept relative as, ../_vti_bin/lists.asmx.Following is the schema of this api.

POST /_vti_bin/Lists.asmx HTTP/1.1
Host: win-hk4iec2ge2r
Content-Type: text/xml; charset=utf-8
Content-Length: length
SOAPAction: "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems"

<?xml version="1.0" encoding="utf-8"?>
 <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
 <soap:Body>
 <UpdateListItems xmlns="http://schemas.microsoft.com/sharepoint/soap/">
 <listName>string</listName>
 <updates>string</updates>
 </UpdateListItems>
 </soap:Body>
</soap:Envelope>

The approach is going to be pretty simple. We’ll be editing our custom XSLT as a normal HTML file with an exception of encoding the HTML schema of the api as we can not use any html tag inside an xml declaration. First we’ll define our HTML structure in the XSLT. Here, we will generate an HTML checkBox against the Title of all the items displayed. The IDs of these checkBoxes are the SharePoint ID of the corresponding ListItem they represent. This will help us to get the IDs of the ListItem that User wants to delete.

<table style="width:100%; padding-left: 0px">

<tr>

<td colspan="2" style="text-align: left; width: 40%"> 
 <input id="chkSelectAll" type="checkbox" name="checkbox" onclick="OnChangeCheckbox(this)" value="SelectAll" />
 <label id="SelectAll">Select All</label>
 </td>


<td style="text-align: left;">
 <button type="button" onclick="DeleteItems()" class="buttonv">Delete</button>
 </td>

 </tr>

</table>

Next declare the checkbox where the code for, for-each rows are written. As mentioned, the checkBoxes will appear against the title for each item in the view.

<div>


 <input type="checkbox" name="checkbox" value="{@ID}" id="{@ID}" onclick="ClearParent(this)"/>
 <a class="list_link" title="{@ListId_x003a_Title}" href="viewList.aspx?ListId={@ListId_x003a_ID}">
 <xsl:value-of select="@ListId_x003a_Title" disable-output-escaping="yes" />
 </a>
 
 <span class="submittedby"></span>
 
 <span class="summary">
 <xsl:value-of select="@ListId_x003a_ShortSummary" disable-output-escaping="yes" />
 </span>
 

</div>

Now all the JavaScript required to complete this operation.

        
        //This function gets the ID of all the ListItems that the user has selected and mark them for Deletion.
        function GetItemsToBeRemoved(){
          var counter = 0;
          var checkedIds = new Array();
          var cbs = document.getElementsByTagName('input');
          for(var i=0; i < cbs.length; i++) {               if(cbs[i].type == 'checkbox') {                   if(cbs[i].value != "SelectAll"){                       if(cbs[i].checked){                         checkedIds[counter++] = cbs[i].id;                       }                   }               }           }           return checkedIds;         }         //This is the function which is called on the Delete Button Click event. Only "" without encoding.         function DeleteItems(){           var checkedIds = GetItemsToBeRemoved();           if(checkedIds.length > 0){
            GenerateRequest(checkedIds);
          }
          else{
            alert('Plz select atleast 1 item to delete.');
          }
        }
        
        //Create and send the SOAP request. Again HTML tags are encoded. Since we'll be generating a Batch request for deletion, we have to generate this request in a for-loop.
        function GenerateRequest(checkedIds){

            var soapEnv = "<?xml version='1.0' encoding='utf-8'?><soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'><soap:Body><UpdateListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'><listName>SpListName</listName><updates><Batch>";
            var methodEnv1 = "<Method ID='1' Cmd='Delete'><Field Name='ID'>";
            var methodEnv2 = "</Field></Method>";
            var soapEnv2 = "</Batch></updates></UpdateListItems></soap:Body></soap:Envelope>";

 
            //Foreach selected item, create a delete request. 
            for (var i = 0; i < checkedIds.length; i++){
                soapEnv+=methodEnv1 + checkedIds[i] + methodEnv2;
            };

            soapEnv+=soapEnv2;

            //Finally send a single batch request for multiple items. 
            $.ajax({
                    url: "../_vti_bin/lists.asmx",
                    beforeSend: function(xhr) { xhr.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");
                },
                type: "POST",
                dataType: "xml",
                data: soapEnv,
                complete: CheckForErrors,
                contentType: "text/xml; charset=\"utf-8\""
            });
        }

        //This function checks if any error has been encountered or not. If no error is found, then it re-Loads the current page to refresh the View.
        function CheckForErrors(xData, status) {

            //alert("Update Status : " + status );
            //alert("Update Status : " + xData.responseText );

            if(status == "success"){
                location.reload(true);
            }

        }

        //helper functions
        
        //Disable the delete button if there are no items to be displayed i.e., the SharePoint List is empty. Call this function on document.ready.
        function ValidateNoRecords(){
            var isDataFound = false;
            var cbs = document.getElementsByTagName('input');
            for(var i=0; i < cbs.length; i++) {
                if(cbs[i].type == 'checkbox') {
                    if(cbs[i].value != "SelectAll"){
                        isDataFound = true;
                        break;
                    }
                }
            }

            if(!isDataFound){
                var id = "#chkSelectAll";
                $(id).closest('tr').hide()
            }

        }

        //Checks whether to display the Delete button or not.
        $(document).ready(function(){
            ValidateNoRecords();
        })

***