How To Add A Delete Button To SharePoint 2013 List Column

In this blog, I will show you how to add a delete button to the SharePoint List / Document Library column as below 

Note : In this example I will implement to the document library 

Implementation

So, simply follow the steps mentioned below.


Create a new calculated column.

Add the following formula. Just copy and paste the formula into the calculated column.

="<a href='#' onclick='javascript:DeleteItem("&ID&");'><img alt='delete' src='/_layouts/images/delitem.gif' style='border:0px;' /></a>"

Select Return data type as : Number an Click "Ok"

Note : In here I created a onclick javascript function as 'DeleteItem' and pass the List Item ID

Now we have a link button in the List View 

Go to List view page > Settings > Edit Page

Add a 'Content Editor' web part and insert the following script

<script type="text/javascript">   
var siteUrl = '/sites/mysiteCollection';
var listName = 'Test-Shashika'
function DeleteItem(itemId) {
var cnf = confirm("Are you sure you want to send the item(s) to the site Recycle Bin?");
if(cnf){
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle(listName );
    this.oListItem = oList.getItemById(itemId);
    oListItem.deleteObject();
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
alert('Item deleted: ' + itemId);
location.reload();
}
}
function onQuerySucceeded() {
    alert('Item deleted: ' + itemId);
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
} 
</script>

---------------- Happy Coding -------------