I was looking at the JQuery for absolute beginner instructional video where I was shown how to add and remove an item for an unordered list. The demo assumed that you had one unordered list on a page. I tried to create a demo where there are two unordered list on a page, but I only want to manipulate one with an ID of loc. I was unsuccessful. Please point me in the correct direction. My code follows…

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href='css/default.css' rel='stylesheet' type='text/css' />
<script src="jquery-1.3.2.min.js" type="text/javascript"> </script>
     <script  type="text/javascript">
    $(function(){
        var i=$('li').size() + 1;
/*        console.log(i);  */
        $('a#add').click(function(){
            $('<li List >' + i + '</li>').appendTo('ul#loc');
            i++;
        });

        $('a#remove').click(function(){ 
            $('li:last').remove('ul#loc');
            i--;
        });
    });
    
    </script>
</head>
<body>
<ul id='loc'>
<li>List 1 </li>
<li>List 2 </li>
<li>List 3 </li>
<li>List 4 </li>
</ul>
<a href="#" id='add'> Add List Item </a>
<br />
<a href="#" id='remove'> Remove List Item </a>
<br />
<ul >
<li>List 1 </li>
<li>List 2 </li>
<li>List 3 </li>
<li>List 4 </li>
</ul>
</body>
</html>

Thanks!
WBR

This question has already been answered. Start a new discussion instead.