How to add Delete button in the Sharepoint list column

Introduction:

In this article we will explore , How to add Delete button to the sharepoint list column as below

Recently i got a requirement to have instant delete button for each item in the sharepoint list view.  

After many workarounds with several examples found the solution.

Implementation:
So simply follow the steps below.

1 : Create a new calculated column as below.

2 : Add the below formula

copy and paste the formula carefully to the calculated column.

 Formula:

=" <img src=""/_layouts/images/delitem.gif"" style=""cursor:pointer"""  & " onclick=""{event.stopPropagation();"  & "var clientContext=new SP.ClientContext.get_current();"  & "var list=clientContext.get_web().get_lists().getById(SP.ListOperation.Selection.getSelectedList());"  & "var TR=this;while(TR.tagName!='TR'){TR=TR.parentNode}"  & "var item=list.getItemById( TR.id.split(String.fromCharCode(44))[1] );"  & "clientContext.load(item);"  & "item.deleteObject();"  & "this.style.opacity=0;"  & "clientContext.executeQueryAsync("  & "(function(){"  & " this.style.opacity=0.5;"  & " this.style.backgroundColor="  & CHAR(39)& "lightcoral" &CHAR(39) &";"  & " true || AJAXRefreshView({currentCtx:ctx,csrAjaxRefresh:true},1);"  & "}).bind(TR));"  & "}"">"

 3 : select the datatype as "Number"   

 4 : Click Ok.

Yeah , finally we got the delete button to list view.


Output :

Hope this article helps !!

Thanks for reading this article ! ! please leave your comments and suggestion about this article.