I am building a custom list item edit form using SharePoint Designer.

I need the item to be deleted when user clicks "Cancel" button (same functionality as he would press "Delete" in ribbon).

I couldn't find too much information about it, so I tried to copy the code of "Delete" button in ribbon and replace the "Cancel" button with it, but it doesn't work...

Any suggestions? Anything helps.


Code of the "Delete" button in the ribbon:

<a class="ms-cui-ctl-large" id="Ribbon.ListForm.Edit.Actions.DeleteItem-Large" onclick="return false;" href="javascript:;" mscui:controltype="Button" aria-describedby="Ribbon.ListForm.Edit.Actions.DeleteItem_ToolTip" role="button" unselectable="on">
    <span class="ms-cui-ctl-largeIconContainer" unselectable="on">
        <span class=" ms-cui-img-32by32 ms-cui-img-cont-float ms-cui-imageDisabled" unselectable="on">
            <img class="" style="top: -341px;left: -511px;" unselectable="on" src="/_layouts/15/1033/images/formatmap32x32.png?rev=43">
    <span class="ms-cui-ctl-largelabel" unselectable="on">

Code of the "Cancel" button:

<input type="button" name="ctl00$ctl40$g_f25929d1_2f2f_439b_b216_92762649c491$gobackbutton2$ctl00$diidIOGoBack" value="Cancel" onclick="setTimeout(function(){window.frameElement.cancelPopUp();}, 0); return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl40$g_f25929d1_2f2f_439b_b216_92762649c491$gobackbutton2$ctl00$diidIOGoBack&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" id="ctl00_ctl40_g_f25929d1_2f2f_439b_b216_92762649c491_gobackbutton2_ctl00_diidIOGoBack" accesskey="C" class="ms-ButtonHeightWidth" target="_self">

Basically, I'm hiding the whole ribbon row and want to have "Delete" button at the bottom of the form instead of "Cancel". But If I just copy the code, it doesn't work...

  • can you please share the code of cancel button?
    – Hardik
    Commented Apr 18, 2016 at 9:38
  • @Hardik , see my updated question
    – Gintas K
    Commented Apr 18, 2016 at 9:42

2 Answers 2


Try the below steps

  1. Add ID field in Form

     <td> ID </td> <td id="txtID"><xsl:value-of select="@ID"/></td>
  2. Add Delete button to the Form

     <input type="button" onclick="javascript:CustomDelete()" value="Delete"></input>
  3. Add the below code to Javascript of Form

    function CustomDelete()
    var context = SP.ClientContext.get_current(); //gets the current context
    var web = context.get_web(); //gets the web object
    var list = web.get_lists(); //gets the collection of lists
    var targetList;
    targetList = list.getByTitle("MyCustomList");
    var itemId = document.getElementById("txtID").value;
    var itemToDelete = targetList.getItemById(itemId);
    context.executeQueryAsync(deleteItemSuccess, deleteItemFailed);
    function deleteItemSuccess() {
    var listItemInfo = 'Item deleted: ';
    function deleteItemFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

Reference :http://www.c-sharpcorner.com/UploadFile/0e18a8/delete-an-item-in-a-list-in-sharepoint-2013-using-csom-javas/

  • Thank you, but it's not exactly what I was looking for... If I would use my custom js function, where do I place my javascript on the form?
    – Gintas K
    Commented Apr 18, 2016 at 10:47
  • You could place it above the div tag inside <ContentTemplate> tag of <SharePointVersionedContent>
    – Sharanya
    Commented Apr 18, 2016 at 11:25
  • I've placed my javascript into the form, but when I try to call my function with a button, I get "Uncaught ReferenceError: myFunction is not defined".
    – Gintas K
    Commented Apr 18, 2016 at 11:48
  • Sorry, I had a syntax mistake in my function, I resolved it. It works!
    – Gintas K
    Commented Apr 18, 2016 at 11:53

You can use below <a> tag to work. Place below mentioned code to your Custom Edit Form & it will work.

<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;__delete={ID=',@ID,'};__commit'))}"><img border="0" alt="Edit" src="/_layouts/images/delete.gif" /></a>

Above Code is getting @ID from the URL as it defined the parameter available in QueryString.

I had tried this & it is working fine for me. :)

  • I get "Uncaught SyntaxError: Unexpected token ILLEGAL" this way... I'm using SharePoint Online if that helps.
    – Gintas K
    Commented Apr 18, 2016 at 11:38
  • I had done the same in SharePoint online. I had created new EditForm & Made it default & than after i replaced Save and cancel buttons above the form with this line.
    – Hardik
    Commented Apr 18, 2016 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.