How To Add A Delete Button To SharePoint List Column

Introduction

In this blog, we will explore how to add a Delete button to the SharePoint list column as below.

SharePoint

Recently, I got a requirement to have an instant Delete button for each item in the SharePoint List View.

After many workarounds with several examples, I found the solution.

Implementation

So, simply follow the steps mentioned below.

Create a new calculated column.
SharePoint

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

Formula

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

Select the datatype as "Number".

SharePoint

Click OK.

Yeah! Finally, we got the Delete button added to the ListView.