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