Create, Edit and Delete with jQuery

In this article we'll go through creating items and adding them to an array, editing any of those items and deleting an item. For anyone who has no idea what jQuery is, below is a brief explanation:

jQuery is a JavaScript Library that focuses on simplifying DOM manipulation, AJAX calls, and Event handling. It is used by JavaScript developers frequently.

jQuery uses a format, $(selector).action() to assign an element(s) to an event. To explain it in detail, $(selector) will call jQuery to select selector element(s), and assign it to an event API called .action().

Source: MDN Web Docs

Please make sure jQuery is included in your project. Including jQuery can be as simple as pasting the integration code from the CDN like this:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

The HTML

<!--The HTML form to add items to the list -->
    <form id = "new">
        <input id="newItem" type="text" placeholder="Please enter some text and submit" />
        <input id="itemSubmit" type="submit" value="Submit" />
    </form>
    
     <!--The HTML form to update list items -->
    <form id = "editing">
        <input id="editItem" type="text" />
        <input id="itemUpdate" type="submit" value="Update" />
    </form>

    <!-- This is our empty list. We will add li items between the ul tags using jQuery -->
    <ul id="itemUL"></ul>

And the Javascript

 <script type="text/javascript">

    //We'll first wait for the document (page) to finish loading
    jQuery(document).ready(function($){

        //Select the input and assign it to the newItem variable for use later
        var newItem = $("#newItem");

        //Select the editing input and assign it to the editItem variable for use later
        var editItem = $("#editItem");

        //Select the submit button and assign it to the itemSubmit variable for use later
        var itemSubmit = $("#itemSubmit");

        //Select the update button and assign it to the itemUpdate variable for use later
        var itemUpdate = $("#itemUpdate");

        //Select the ul and assign it to the itemUL variable for use later
        var itemUL = $("#itemUL");

        //Select the editing form and hide it
        var editing = $("#editing");
        editing.hide();

        //Create an empty array
        var list = [];

        //Make our selected array key a global variable
        var key;

        //Listen for a click on the submit button    
        itemSubmit.click(function(e){

            //Prevent the form from submitting, which would reload the page
            e.preventDefault();
            
            //Check if any text was entered
            if(newItem.val() != '') {

                //Send the submitted value to the addToList function
                addToList(newItem.val());
            }

    	 });


        function addToList(item) {

            //Add the submitted item to the array
            list.push(item);

            //Call the updateList function to display the list on the page
            updateList();

        }


        function updateList() {

                //Clear the form input
                newItem.val('');

                //This is an empty variable called li for easy identification
                var li = '';

                //Loop through the array 
                for (i = 0; i < list.length; i++) {

                    // The value of each item's key = i. We add each item to the li variable
                    li += "<li class='' id='"+ i +"'>" +list[i] + "<div style='float:right;'><span id='edit'>Edit</span> <span id='remove'>Delete</span></div></li>";
                    }

                //Display the list now stored in li inside the ul
                itemUL.html(li);        

         }


         //Listen for a click on all the list items in the ul and check the clicked element and id
        itemUL.on("click", "span#edit", function(e) {

                //The button is a child item to the li. This is why we want the parent's id and assign it to the key variable
                key = $(this).parent().parent()[0].id;

                //We'll hide the new item form and show the editing one instead. 
                $("#new").hide();

                //Show the editing form that we hid earlier. 
                editing.show();

                //Fill it the text field with text from the item we want to edit
                editItem.val(list[key]);
 
        });


        
         //Listen for a click on the item update button
         itemUpdate.click(function(e) {

                //Prevent the form from submitting, which would reload the page
                e.preventDefault();

                //Set the item in the array to be whatever is in the update text field
                list[key] = editItem.val(); 

                //We'll now hide the editing form and show the adding one 
                $("#editing").hide();
                $("#new").show();

                //Reload the updated list
                updateList();

            });


        //Listen for a click on all the list items in the ul and check the clicked element and id
        itemUL.on("click", "span#remove", function(e) {

                //The button is a child item to the li. This is why we want the parent's id and assign it to the key variable
                key = $(this).parent().parent()[0].id;

                //We remove only one item starting with the one with the key
                list.splice(key, 1); 

                //Make sure editing is hidden
                $("#editing").hide();
                $("#new").show(500);
                
                //Reload the updated list
                updateList();

            });             
    });

        
</script>  

Demo

 
 

    Comments

    I never heard of this term before and I am learning a lot of new things from your blogs that is why I subscribed it. In all these years whatever I have learned I have used bestessays  to document it. Every little note and tips I read is saved.

     

    Life is difficult sometimes and you have to let go of yourself to find yourself back. It is good to know that you have realized it and are ready to be back in action. I would love to read more of your blogs. You can find some nice blogs at best newborn stroller reviews that you should take a look at.

    Add new comment

    The content of this field is kept private and will not be shown publicly.
    Target Image