Welcome to the 19th Easy jQuery tutorial! Ready to learn about creating a full blown CRUD application with jQuery and HTML?

First, I apologize for the super long video! I didn't realize how long I would talk for. It took me an hour to record but the edited version is just over 20 minutes. If you have any questions, don't hesitate to ask. 

In this tutorial, I show you how to use your knowledge from the last four tutorials and create an app that's managed directly from the UI. Use all the HTTP methods we learned included GET, POST, PUT, and DELETE. 

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. 

Learn about the four methods here:

HTTP GET

HTTP POST

HTTP PUT

HTTP DELETE

Note that there are three tutorials on the GET method. The other two are $.get() and $.getJSON(). 

An example of what we are doing in the video is below. We encase our old AJAX methods in functions which can be triggered elsewhere. 

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

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

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.

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