javascript - 单击删除附加的 Div (JQuery)

Question

我在单击按钮删除附加的 div 时遇到了一些问题。

当我使用 hide() 时，我在美学上得到了正确的行为，但它实际上并没有删除新的 div，这是我想要的，因为这些数据将被发送到网络服务。

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();
    });                     
});

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>

按钮本身是动态生成的(参见第 3 行)并单击，我希望它删除特定附加的 div 而无需关闭整个窗口，当我使用 .remove( ) 而不是 hide()。

所以，谁能告诉我:

1. 为什么使用 remove() 而不是 hide() 会关闭我的整个模板窗口而不是删除那个单独的 div，就像 hide() 看起来像它正在做的那样。

2. 为什么，当我创建附加 div 的多个实例时，.removed 单击处理程序会被多次调用(如果您创建两个实例，删除一个它循环一次，删除第二个它循环两次等等)

3. 如何在实际删除附加的 div 的同时获得 hide() 的物理功能？

谢谢

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.

我不知道你所说的模板窗口是什么意思，所以在这里我真的帮不上忙。

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

因为无论何时执行点击事件处理程序并创建一个新的 div，您都会将一个新的事件处理程序绑定(bind)到所有 .removed 元素，刚刚创建的元素和所有元素其他现有的。

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

可能和上面的问题有关。使用 event delegation对于删除 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();
});