HTTP DELETE data with API Call

Published on: September 30, 2018

Welcome to the 18th Easy jQuery tutorial! We are still on AJAX and today we cover the HTTP DELETE method with $.ajax()

DELETE allows you to delete data from a remote data source with a simple API call. This is the D in CRUD and the last HTTP Method that we are going to cover. 

DELETE is pretty simple to understand. The only thing you need to specify when sending a DELETE call to an API is telling it what record to delete. More often than not, it's just one identifier. In the example in this video, I send the ID in of the data element to delete in the URL as a parameter. Other APIs can require you to send the data using the request body or header. 

Here's a quick example of the HTTP DELETE used in the video:

    
     $.ajax({
        url: 'http://localhost:3000/api/tutorials/5b84a6be8ccb4f18f85cdd04',
        method: 'DELETE',
        dataType: 'json',
        success: function(data) {
            console.log(data);
            getTutorials();
        }
    });

Since it's a simple DELETE, we're not sending any kind of extra data here. Just specifying that the dataType that we're expecting to get back is JSON. The application will simply send back the record we deleted as confirmatino. 

The backend API was created using ExpressJS. I do not go into how to create that (not yet!). 

I hope you enjoyed this tutorial! Please feel free to ask questions below or just leave your comments.

Since this tutorial was done in Brackets, there is no JS Fiddle. This description will be updated after the AJAX series has been completed and I've uploaded the files in the resources section below. I'm planning on showing you how to consume these API end points using HTML web forms so if you're interestd in learning how to create a full CRUD application with HTML and JavaScript (jQuery), subscribe and come back in a couple of weeks!

Remember to checkout the Resources section below for associated downloadable content, JSFiddle links, and other resources. Watch the video and follow along!

Resources:

You can find the entire HTML and JavaScript files at the following URL: https://www.easyprogramming.net/downloads/jquery/crudApp/

You can get the source HTML out of that page and if you are having trouble finding the JavaScript, find it at the following URL: https://www.easyprogramming.net/downloads/jquery/crudApp/script.js



Comments: