How to delete list attachments using javascript

Question

How to delete list attachments using javascript? I have searched for same thing, but so many results are coming in which they are suggesting by using client object model using C# code. I didn't find any javascript code to delete. I have observed in the list item while editing, there is one delete button. If I mouse over on that, it is showing javascript code like javascript:RemoveAttachmentFromServer('{EA96B896-B863-4EF5-85CF-8121B734F3F7}',1). Here the id what is presented not even list id. I think this is attachment id may be, if it is attachment id then how to get this? I have tried with SPServices to get the attachments, but id is not coming for attachments, it is only returning url of the attachment. Is there any way to utilize this function to delete the list attachment?

Answer 1

JSOM

var listTitle = 'Tasks'
var itemId = 1;
var fileName = 'Instruction.docx';


var ctx = SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle(listTitle);
var item = list.getItemById(itemId);
var attachmentFile = item.get_attachmentFiles().getByFileName(fileName); 
attachmentFile.deleteObject();
ctx.executeQueryAsync(
  function(){
     console.log('Attachment file has been deleted');  
  },
  function(sender,args) 
  {
     console.log(args.get_message());
  });

REST

function deleteAttachmentFile(webUrl,listTitle,itemId,fileName)
{
   return $.ajax({
      url: webUrl + "/_api/lists/getByTitle('" +  listTitle + "')/getItemById(" + itemId + ")/AttachmentFiles/getByFileName('" + fileName + "')",
      method: 'POST',
      contentType: 'application/json;odata=verbose',
      headers: {
        'X-RequestDigest': $('#__REQUESTDIGEST').val(),
        'X-HTTP-Method' : 'DELETE',
        'Accept': 'application/json;odata=verbose'
      }
   });    
}

Usage

deleteAttachmentFile(_spPageContextInfo.webAbsoluteUrl,'Tasks',1,'Instruction.docx')
.done(function(data)
{
     console.log('Attachment file has been deleted');
})
.fail(
function(error){
    console.log(error.responseText);
});

Answer 2

I have done it using SPServices and it works fine. Below is the code:

$().SPServices({
    operation: "DeleteAttachment",
    listName: "List Name",
    listItemID: itemId, //list item id
    url: filePath, //url of attachment that needs to be deleted
    completefunc: function (xData, Status) {
        console.log('Deleted');
    }
});

Source

you can first fetch all the attachments of a list item and then delete. You need list item id for this. To fetch all attachments you can use the below code:

$().SPServices({
    operation: "GetAttachmentCollection",
    listName: "ListName",
    ID: itemId, //list item id
    completefunc: function (xData, Status) {
        $(xData.responseXML).find("Attachments > Attachment").each(function (i, el) {
            var $node = $(this),
            filePath = $node.text(),
            //now call DeleteAttachment using this filepath and item id to delete  
        });
    }
});