Or one could use .live()
$('.removeitem').live("click",
function(){
$(this).prev().parent().remove();
return false;
});
So that when an item with class 'removeitem' is created, it is
automatically bound to the click event.
Just a thought!
-S
On Thu, 04 Jun 2009 22:12:00 +0700, Erdwin Lianata
<erdwin.lian...@yahoo.com.sg> wrote:
> 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>
>>
