JQuery not removing added element
- by Scott
What I want to do is add and remove list items. I have got it to add new items to the list and I can remove existing ones but not the ones that have been added. It seem like it would work but it doesn't. Any help would be appreciated! Here the code:
JQuery:
<script type="text/javascript">
$(function(){
$('a#add').click(function(){
$('<li><a href="#" id="remove">--</a>List item</li>').appendTo('ul#list');
});
$('a#remove').click(function(){
$(this).parent().remove();
});
});
</script>
HTML:
<a href="#" id="add">Add List Item</a>
<ul id="list">
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
</ul>
