Question

I’m having a bit of a problem deleting appended divs on the click of a button.

When I use hide(), I get the correct behaviour aesthetically but it doesn’t actually delete the new div’s, which I want as this data will be getting sent to a webservice.

JQuery:

$('a.addListOVM').click(function(e){    
    e.preventDefault();         
    $('.addCardOVM').append('<div class="divform"><label>' + $('.my_select').find(':selected').val() + '</label>' + '<a class="removed" href="">-</a></div>');

    $('.removed').click(function(e){            
        e.preventDefault();
        $(this).closest('.divform').hide();
    });                     
});

Template HTML:

<div class="divform">
 <select class="my_select" name="vlans_{$NetworkDTO->id}[]">
  {foreach from=$arrNetworkDTO item=NetworkDTO name=arr}
    <option class="addOvmCardList" value="{$NetworkDTO->name|escape}">{$NetworkDTO->name}</option>
  {/foreach}
 </select>
<a href="" class="addListOVM">+</a> 
</div>

The button itself is dynamically generated (see the 3rd line) and on-click, I want it to delete that specific appended div without closing the whole window, which it seems to be doing when I use .remove() instead of hide().

So, can anyone tell me:

1. Why using remove() instead of hide() closes my whole template window instead of deleting that individual div, like hide() LOOKS like it’s doing.

2. Why, when I have created multiple instances of the appended div, does the .removed click handler get called multiple times (if you create two instances, delete one it loops through once, delete the second it loops through twice etc.)

3. How can I get the physical functionality of hide() while actually deleting the appended div?

Thanks

Answer 1

1. Why using remove() instead of hide() closes my whole template window instead of deleting that individual div, like hide() LOOKS like it’s doing.

I don’t know what you mean by template window, so I cannot really help here.

2. Why, when I have created multiple instances of the appended div, does the .removed click handler get called multiple times (if you create two instances, delete one it loops through once, delete the second it loops through twice etc.)

Because whenever the click event handler is executed and you create a new div, you bind a new event handler to all .removed elements, the just created one and all other existing ones.

3. How can I get the physical functionality of hide() while actually deleting the appended div?

Maybe it is related to the problem above. Use event delegation for the event handler that removes the div:

$('a.addListOVM').click(function(e){    
    e.preventDefault();         
    $('.addCardOVM').append('<div class="divform"><label>' + $('.my_select').find(':selected').val() + '</label>' + '<a class="removed" href="">-</a></div>');                 
});

$('.addCardOVM').on('click', '.removed', function(e){            
    e.preventDefault();
    $(this).closest('.divform').remove();
});