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

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

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

Answer 2

'的{{1}}左侧缺少字符串引用，这可能是个问题。

.filtering

如何删除克隆元素

2 个答案: