jquery - Select 'i' element inside child span -

i have html structure:

<div id="grouplist">   <div class="element">     <span class="label label-default" data-index="0">       big big big big big big big name!.txt       <i class="fa fa-times"></i>     </span>   </div> </div> 

the <i> icon of font-awesome remove .element.

if select in jquery:

$(document).off('click').on('click', '#grouplist .element > span', function() 

it works. want execute function when user press icon inside i. like:

$(document).off('click').on('click', '#grouplist .element > span > i', function() 

but doesn't work. missing here?

i'd suggest, given html:

// select <i> element 'fa' , 'fa-times' class-name, // exists within element matching '.element' selector'; // when <i> element clicked: $('.element i.fa.fa-times').on('click', function () {    // remove closest ancestor element matching   // '.element' selector:   $(this).closest('.element').remove(); }); 

$('.element i.fa.fa-times').on('click', function () {    $(this).closest('.element').remove();  });

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="grouplist">    <div class="element">      <span class="label label-default" data-index="0">        big big big big big big big name!.txt        <i class="fa fa-times"></i>      </span>    </div>  </div>

references:

• closest().
• on().
• remove().