There are two main methods in jQuery that we will be using. These methods are called:
This lesson we’ll create a new un-ordered and have two links on the page. One will add items, and the other will remove the list items.
Let’s look at the code:
Ok. Let’s go over the source code.
You might have wondered why I bothered to wrap <p> tags around my Anchor tags. It’s amazing that more people don’t realize this. In xhtml the spec says you have to have Anchor tags wrapped in a block level element.
As far as the Jquery code goes let’s see how it reads:
- Line 1 – When the document is ready run some jQuery Code.
- Line 2 – Find out how many List items are in the unordered list with the class of menu.
- Line 3 – When the anchor tag with the class of addItem is clicked run some code
- Line 4 – Because we are adding an item we must make sure that we increment “I” before we output anything
- Line 5 – We are still in the same section of running code. We’re going to at a new List item. We are outputing the variable i . It’s important that you don’t include it in the ‘’. Otherwise the code out output I as a text instead of the variable value.
- Line 6 – End running code if addItem was clicked.
- Line 7 – If the anchor tag with a class of removeItem was clicked then run some code
- Line 8 – It’s always good to put safety measures in place. You can’t have negative amounts of list items. I’m testing what “I” is before I do anything.
- Line 9 – As long as “I” is greater or equal to one we can remove a list item we can proceed.
- Line 10 – Let’s first update “I” by removing 1.
- Line 11 – Go to the last list item in the menu class and remove that item.