[jQuery] Re: Removing dynamically inserted html

[Erdwin Lianata]

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>
>