Delete a File in SharePoint 2013 Using JavaScript Object Model (JSOM)

You can use the SharePoint client object model to retrieve, update and manage data in SharePoint 2013. SharePoint makes the object model available in several forms.

• .NET Framework redistributable assemblies.
• JavaScript library.
• REST/OData endpoints.
• Windows Phone assemblies.
• Silverlight redistributable assemblies.

This article shows how to do basic operations using the JavaScript object model. You can add a reference to the object model using HTML <script> tags.

The following sections describe tasks that you can complete programmatically and they include JavaScript code examples that shows the operations.

To delete a file, call the deleteObject() function on the object. The following example uses the getFileByServerRelativeUrl method to retrieve the file from the Document Library and then deletes the item.

Procedure

 

Open your SharePoint Site in SharePoint 2013 Designer, then select an Assets icon in the designer ribbon and add a JavaScript file.


Figure 1: JavaScript File

After adding a JavaScript file, this file will be available in the SharePoint Site Assets Folder.


Figure 2: Site Assets Folder

Go to the SharePoint site Page and add a new page to the SharePoint site.


Figure 3: Sp Site Page


Figure 4: New Page

After adding a page, select an Insert button in the Ribbon Menu.


Figure 5: Ribbon Menu

Then add a Content Editor Web part into the page.


Figure 6: Content Editor

Edit the WebPart and add a JavaScript file link to the content link.


Figure 7: Edit the web part

Save the web part and save the page in the site. Click the button!


Figure 8: Save the web Part


Figure 9: List deleted successfully

List deleted Successfully.

Source Code

< div > < button onclick = " deleteFile ()" > Click here to deleteFile < /button></div >

< div id = " resultpanel " > < /div>
<script type="text/javascript
">
function deleteFile(resultpanel)
{
var clientContext;
var oWebsite;
var fileUrl;
clientContext = new SP.ClientContext.get_current();
oWebsite = clientContext.get_web();
clientContext.load(oWebsite);
clientContext.executeQueryAsync(function ()
{
fileUrl = oWebsite.get_serverRelativeUrl() +
" / Lists / Shared Documents / TextFile1.txt ";
this.fileToDelete = oWebsite.getFileByServerRelativeUrl(fileUrl);
this.fileToDelete.deleteObject();

clientContext.executeQueryAsync(
Function.createDelegate(this, successHandler),
Function.createDelegate(this, errorHandler)
);
}, errorHandler);

function successHandler()
{
resultpanel.innerHTML =
"
Go to the " +
" < a href = '../Lists/Shared Documents' > document library < /a> " +
"to confirm that the \"TextFile1.txt\" file has been deleted.";
}

function errorHandler() {
resultpanel.innerHTML = "Request failed: " + arguments[1].get_message();
}
}

</script >

Thanks for reading the article.