如何刪除克隆元素

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(){