javascript - 如何删除克隆的元素

Question

使用 Jquery，我正在尝试制作类似于本网站中使用的过滤系统的功能（示例）

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

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

我进行了数小时的研究，但找不到任何解决方案，因此我们将不胜感激！

这是我的代码

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

由于元素是动态创建的，因此您需要事件委托

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

Answer 2

您在左侧缺少字符串引号'，.filtering这可能是一个问题。

$(.filtering').click(function(){