[jQuery] Removing dynamically inserted html
Why isn't this code working? I can add items but only remove the ones
originally added in the source code, not the ones dynamically added.
<form>
<div class="list">
<div class="item">
<input type="text" value="" /> <a href=""
class="removeitem">Remove this item</a>
</div>
<div class="item">
<input type="text" value="" /> <a href=""
class="removeitem">Remove this item</a>
</div>
<a href="" class="additem">Add item to list</a>
</div>
</form>
<script type="text/javascript">
// Add item to list
$('.additem').click(function(){
var template = $($(this).prev().get(0)).clone();
template.insertBefore($(this));
return false;
});
// Remove item from list
$('.removeitem').click(function(){
$(this).prev().parent().remove();
return false;
});
</script>