Delete a Folder in Document Library in SharePoint 2013 Using CSOM-JavaScript

Introduction

This article explains how to delete a folder in a Document Library in SharePoint 2013 using CSOM-JavaScript.

Prerequisites

1. Ensure you have access to the Office 365 online.
2. Ensure the Napa Tool is available in your site.

Use the following procedure:

1. Create an app for SharePoint using Office 365 Tools. If you have missed out on how to create an app in SharePoint 2013, then Click here.
2. Create a Docment Library and name it “MyDocumentLibrary”. Refer to my article if you want to understand how to create Document Library in SP2013. Click Here.
3. Create a folder and name it “MyCustomFolder”. If you want to understand how to create a folder then Click here.
4. Click on the Default.aspx page.
   
   
    
5. Add a button to delete a folder and place it inside the “PlaceHolderMain” tag as in the following:
   
   <button id="btnDeleteFolder" onclick="deleteFolder()">Delete Folder</button><br/>
    
6. Click on the App.js file.
   
   
    
7. Globally declare the content and web objects as shown below.
    

   var context = SP.ClientContext.get_current(); //gets the current context

   var web = context.get_web(); //gets the web object
   var folderUrl;

   var folderToDelete;
    

8. Now write the function to delete a folder in a Document Library as in the following:
    

       function deleteFolder() {

           context.load(web);

           context.executeQueryAsync(getServerRelativeURL, onFolderDeleteFail);

       }

       function getServerRelativeURL() {

           folderUrl = web.get_serverRelativeUrl() + "/MyDocumentLibrary/MyCustomFolder";

           //specify the Document Library name and the folder name that you want to delete.

           folderToDelete = web.getFolderByServerRelativeUrl(folderUrl);

           folderToDelete.deleteObject();

           context.executeQueryAsync(onFolderDeleteSuccess, onFolderDeleteFail);

       }
    

9. Here in this example we are deleting an exsisting folder.
10. To delete the folder we are using the “getFolderByServerRelativeUrl” method to retrieve the folder from the Document Library. Execute the code by calling executeQueryAsync () to get the relative URL.
11. And then we are calling the “deleteObject” method on the item object.
12. Now execute the code by calling executeQueryAsync ().
     

        function onFolderDeleteSuccess() {

            alert("Folder Deleted");

        }

        // This function is executed if the above call fails

        function onFolderDeleteFail(sender, args) {

            alert('Failed to delete the Folder. Error:' + args.get_message());

        }
     

13. That's it! Now let's start testing.

Testing

1. Now to run the app click on the "Play" button available towards the left-most corner.
   
   
    
2. The app is packaged, deployed, and installed on your Office 365 Site.
   
   
    
3. Now you will be able to see the following page.
   
   
    
4. Before clicking on the Delete Folder let's navigate to the following URL.
   
   Syntax: https://yoursite/DocumentLibraryName
   Example:https://mysite/MyDocumentLibrary
   
   
    
5. Now you will be able to see the “MyCustomFolder”. Let's now proceed and click on the “Delete Folder” button.
6. Navigate to the Document Library. Magic! The “MyCustomFolder” has been deleted from the Document Library.
   
   

Summary

Thus in this article you saw how to delete a folder in a Document Library in SharePoint 2013 using CSOM-JavaScript.