javascript - How to remove cloned elements -

with jquery, trying make function similar filtering system used in website(example)

if click 1 of filter elements, displayed in area. can remove selected filter clicking it.

my code works cloning filter element , displaying in area having trouble removing it.

i did hours of research not find solution appreciated!

here code

---html---

    <div id="filter-selected>        <ul>           <!--selected element comes here -->        </ul>     </div>      <div id="filter-options">        <ul>            <li>                <!--clicking list clone above area-->                <span>value1</span>            </li>            <li>                <!--clicking list clone 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(); }); 

since elements created dynamically, need event delegation

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