javascript - 如何删除克隆的元素

Question

使用Jquery，我试图做一个类似于本网站使用的过滤系统的功能(example)

如果您单击其中一个过滤器元素，它将显示在另一个区域中。您只需单击即可删除所选过滤器。

我的代码适用于克隆过滤器元素并将其显示在另一个区域，但是 我无法删除它。

我进行了数小时的研究，但找不到任何解决方案，因此非常感谢您的帮助!

这是我的代码

---html---

    <div id="filter-selected>
       <ul>
          <!--selected element comes here -->
       </ul>
    </div>

    <div id="filter-options">
       <ul>
           <li>
               <!--clicking this list will clone itself to the above area-->
               <span>Value1</span>
           </li>
           <li>
               <!--clicking this list will clone itself to the above area-->
               <span>Value2</span>
           </li> 
       </ul>
    </div>

---Jquery---

$('#filter-options > ul > li').click(function(event){
    var $filter = $(this).children('span').clone();

    $filter.appendTo('#filter-selected > ul').wrap('<li class="filtering"></li>');
});

$(.filtering').click(function(){
    $(this).remove();
});

Answer 1

由于元素是动态创建的，所以需要事件委托(delegate)

$('#filter-selected').on('click', '.filtering', function(){
    $(this).remove();
});