Spfx Delete item from list

Question

I delete last inserted item from list with this method below;

private deleteItem(): void {
    if (!window.confirm('Are you sure you want to delete the latest item?')) {
      return;
    }

    this.setState({
      status: 'Loading latest items...',
      items: []
    });
    let latestItemId: number = undefined;
    let etag: string = undefined;
    this.getLatestItemId()
      .then((itemId: number): Promise<Response> => {
        if (itemId === -1) {
          throw new Error('No items found in the list');
        }

        latestItemId = itemId;
        this.setState({
          status: `Loading information about item ID: ${latestItemId}...`,
          items: []
        });
        return this.props.httpClient.get(`${this.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items(${latestItemId})?$select=Id`, SPHttpClientConfigurations.v1);
      })
      .then((response: Response): Promise<IListItem> => {
        etag = response.headers.get('ETag');
        return response.json();
      })
      .then((item: IListItem): Promise<Response> => {
        this.setState({
          status: `Deleting item with ID: ${latestItemId}...`,
          items: []
        });
        return this.props.httpClient.post(`${this.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items(${item.Id})`, 
        SPHttpClientConfigurations.v1,{
          headers: {
            'Accept': 'application/json;odata=nometadata',
            'Content-type': 'application/json;odata=verbose',
            'odata-version': ''
          }
      })
      .then((response: Response): void => {
        this.setState({
          status: `Item with ID: ${latestItemId} successfully deleted`,
          items: []
        });
      });
  }

Problem is; nothing wrong except not delete item.

I create new item and then delete it, method runs well but when get all items I see the last inserted item in list;

I created;

than deleted;

and get all items;

so delete not works. here is the response content when i delete an item, these are responses in network;

items(29)?$select=Id

{"@odata.context":"https://mod970274.sharepoint.com/sites/test14jan/_api/$metadata#SP.ListData.Announcement2ListItems/$entity","@odata.type":"#SP.Data.Announcement2ListItem","@odata.id":"d2419038-e83f-44ff-94e3-696227bc4464","@odata.etag":"\"1\"","@odata.editLink":"Web/Lists(guid'9e34b6e2-0556-409d-8df1-1713a724317c')/Items(29)","Id":29,"ID":29}

items(29)

{"FileSystemObjectType":0,"Id":29,"ServerRedirectedEmbedUrl":"","ID":29,"ContentTypeId":"0x0100A284FACE7B38144693C5AA2873344F92","Title":"Item CREATED","Modified":"2017-01-23T16:35:58Z","Created":"2017-01-23T16:35:58Z","AuthorId":3,"EditorId":3,"OData__UIVersionString":"1.0","Attachments":false,"GUID":"b9e65de2-56e5-4d78-8a48-ced4e1499a4a"}

everything seems ok. but somehow list item not deleted... how can i debug this process deeply and fix it?

Answer 1

It seems you didn't provide valid headers for deletion.

Update your last post with the following headers (consider X-HTTP-Method):

headers: {
            'Accept': 'application/json;odata=nometadata',
            'Content-type': 'application/json;odata=verbose',
            'odata-version': '',
            'IF-MATCH': etag,
            'X-HTTP-Method': 'DELETE'
          }