[jQuery] Re: Removing dynamically inserted html

Because you never bind your dinamically added items.
Try adding new variable function that contains your removing item code,
then re-bind for all .removeitem's item just after you added a new item.

This is what I've done so far:

var ItemRemoveFn = function(event) {
// Here is your remove item code
$(this).prev().parent().remove();
return false;
}

function propagateRemoveItem() {
$('.removeitem').unbind('click', itemRemoveFn);
$('.removeitem').bind('click', itemRemoveFn);
}

$(document).ready(function() {
$('.additem').click(function(){
var template = $($(this).prev().get(0)).clone();
template.insertBefore($(this));
propagateRemoveItem(); // Binding for all items
return false;
});
propagateRemoveItem(); // Binding for static item
});

http://kristiannissen.wordpress.com wrote:
> 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>
>