Call Me Goon

Description

This script allows us to add an element (in this case an li) to the DOM when an anchor tag is clicked. And conversely, remove an element when a different anchor tag is clicked.

We start with an unordered list with 4 list items. I also gave it a specific id=”testList”. If you don’t give it an id, a new li will be added to every list on the page when you click the anchor link. We create a variable called ‘i’ that is equal to the the number of list items plus 1. Then, when the the anchor tag with id ‘add’ is clicked, we are creating (appending) a new list item containing the value of i (5). Next, we add one to i (i++ or i=i+1), therefore setting a new value to i of 6 (5+1). Now if we were to click the anchor tag with id ‘add’, we would create a new li with the value of i which is now 6, and i then becomes 1 greater (7), and so on.

We then add an anchor tag with an id of ‘remove’. When this is clicked, we are removing the last li with the .remove method on li:last. We then decrease the value of i by 1 (i– or i=i-1) in order to always maintain i’s value to be one greater than the number of list items showing on the page. If we didn’t add this last step, then the value of i would not necessarily match that of the number of list items plus 1. For example, if we had 9 list items, and clicked remove three times to show only 6 list items, then the next time we clicked ‘Add’, it would add an li with a value of 10 because the last time we defined i was adding one to it when the list size was nine. Therefore, we both add and subtract 1 from i each time a respective anchor tag is clicked.

View the source below for the code and comments.

Demo:

• 1
• 2
• 3
• 4

Add List Item
Remove List Item

The Code

HTML

<ul id="testList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <a href="#" id="add">Add List Item</a><br />
  <a href="#" id="remove">Remove List Item</a>

jQuery

<script src="js/jquery.min.js"></script>  <!-- This links to the jquery framework.  Remember that it must be in your project folder in a folder named 'js' -->
<script type="text/javascript">
    $(function() {
      var i = $('ul#testList li').size() + 1; // creates a variable named i that is equal to the length (number) of list items that we have
      // console.log('i'); uncomment this line to run a check to make sure i is getting the correct value for the number of li's (requires firebug)
      $('a#add').click(function() { // run this function when the anchor tag with id of add is clicked
        $('<li>' + i + '</li>').appendTo('ul#testList'); // When the anchor tag with id add is clicked, we are creating another li (when you add the html <> around the element, it actually creates that element versus not having the <> in which case jQuery just calls to that element) we then close our quote so jQuery doesn't think it is all one long string and concatenate (+) our variable i (which holds a value of the size of our list plus 1) and then cocatenate our closing li tag (</li>).  Essentially this creates a new li with a number one more than the previous and appends it to our unordered list.
        i++; // same as i = i + 1 or, take the variable i and add one to it.
        return false;
      });
      $('a#remove').click(function() {
        $('ul#testList li:last').remove(); // when the anchor tag with id remove is clicked, we are remove the last li in the list.  
        i--; // after removing the last li in the list, we decrease the value of i by 1, i=i-1.  If we didn't do this, the next time we went back to add a new list item, the value of i would pick up where we left off before, not one greater than the current list suggests.
        return false;
      });
    });
  </script>

Download Source

View the ThemeForest.net Screencast »

•