Real Time Add and Delete Data using JQuery

Once in a while we may discover a need to progressively include and evacuate HTML components into a site page or application. Yes sometimes, since it is imperative that we have all the required data with us before beginning to outline the structures or pages. This however does not discount the likelihood of such necessity. There have been cases where clients needed to have advantageous access to including and expelling components on their website pages.



In this tutorial, we will teach you on how to add and remove data list in a <ul> element tag. Well, we start off by creating a Todo List app.

First, we need to create our HTML file

  Add Todos
 

To-Do Lists:

In order to use JQuery in our app, we need to load JQuery library script to our HTML code

Then we will add our script for adding and deleting list in the list.

$( document ).ready( function() {

 /**
 * We Create a variable which will hold 
 * the value for the ID of each item elements
 */
 var counter_id = 0;

 /*
 * Function for adding todo list
 * Triggers when clicking the "Add Todos" button
 */ 
    $( '#add-todos' ).click(function() {

  /*
  * This variable will hold the value inputted by the user on the textbox field
  *
  */ 
        var item = $( '#todo' );

  /*
  * HTML layout for the list to be appended when adding
  *
  */
        var list = '
' +
      '

' +
       '- ' +item.val() + 
      '
' +
      '

' +
       'Remove' +
      '
' +
     '
';
   

  if ( item.val() ) {
   /*
   * Using the .prepend() function, we will insert the added value
   * to the top of the list
   */
   $('ul').prepend( list );
  } else {
   alert( 'Field empty!' ); 
  }
  

  // Clear field
  $( '#todo' ).val( '' );

  /*
  * We will need to increment the counter ID for the next data. 
  *
  */
        counter_id += 1;
    } );

 /*
 * Function for deleting a todo list
 * Triggers when clicking the "Remove" link
 */ 
    // 
    $( 'ul' ).on( 'click' , '.remove-todo' , function () {

     /*
  * This will remove the list by getting the 
  * "val" attribute's value in the element
     */ 
     $( '#' + $( this ).attr( 'val' ) ).fadeOut();

     /*
     * Displays a message after a successful delete
     *
  */
     $( '#message' ).text( $( this ).attr( 'val' ) + ' successfully removed.' );
     $( '#message' ).atty( 'style' , 'display: block' );

     setTimeout(function() {
   $( '#message' ).fadeOut();        
     }, 3000);

    } );

} );

For adding data on a list, we utilized the jQuery "prepend()" method. This method will add a HTML element toward the start of the list of elements. So the recently included element will be at the top of the list, followed by the elements added recently.


Adding a ToDo list:

Figure 1.A

 Adding  a  Todos in the Todo list by writing your Todo in the text field. Then click Add Todos button.

Figure 1.B

As you can see on the image above, your  Todos are listed from latest to oldest todo. The .prepend() JQuery function adds the item from the top of the Todo List.

Deleting a list

Figure 2

You could also delete your Todo item from the list by clicking the "Remove" link.

That's it! Simple and yet useful, right? You can now add any number of elements on your web page dynamically using the above procedures and methods.