jQuery Droppable - 无法删除克隆元素

Question

我正在使用jQuery UI Droppable ......

我需要像拖放一样的功能来点击Draggable中的星形图标，它必须添加到Droppable容器中。我成功尝试过。

但是，当我尝试从Droppable容器中删除<li>元素时，同样的技巧（克隆）无法正常工作......这里...单击“关闭”图标它应该只关闭相关的{{1来自可拖动区域。

请问快速建议吗？

可以：

• 克隆（点击星标图标）仅限制一次...同时为多次点击创建多个<li>。

FIDDLE

  

参考的屏幕截图

  

HTML

<li>

  

的jQuery

<div class="mn-items">
  <h2>Drag</h2>
  <div id="catalog">
      <ul class="rp-draggable">
        <li class="one">Item 1 <i class="fa fa-star-o"></i></li>
        <li class="two">Item 2 <i class="fa fa-star-o"></i></li>
        <li class="three">Item 3 <i class="fa fa-star-o"></i></li>
        <li class="four">Item 4 <i class="fa fa-star-o"></i></li>
        <li class="five">Item 5 <i class="fa fa-star-o"></i></li>
        <li class="six">Item 6 <i class="fa fa-star-o"></i></li>
      </ul>
  </div>
</div>

<div class="header-favorites">
  <h2>Drop Here...</h2>
    <ul class="h-droped-list">
      <li class="placeholder">Add your items here</li>
    </ul>
</div>

Answer 1

删除按钮li是动态添加的，您需要使用事件委派将事件附加到它们：

$("ul.h-droped-list").on('click','li .fa-star-o',function(){
    $(this).closest('li').remove();
});

<强> Working Demo

Answer 2

事情是你需要将click事件委托给其父项以获取动态添加的元素

 /* Click Close Icon to Remove from Drop Here Container */
$('.header-favorites').on('click',"ul.h-droped-list li .fa-star-o",function(){
   $(this).closest('li').remove();
});

demo