Не удаляется элемент по клику

$('.compare').on('click', '.to_compare', function() { 
  //add_to_compare($(this).attr('data-id'), $(this).attr('data-section')); 
  $(this).parent('.compare').append('<div class="del_compare cl_compare" data-id="' + $(this).attr('data-id') + '" data-section="' + $(this).attr('data-section') + '">' + $(this).parent('.compare').find('.hide.comp_not').text() + '</div>'); 
  $(this).remove(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="compare" id="31591" data-iscomp="comp_yes"> 
  <div class="to_compare cl_compare" data-id="31591" data-section="1779" style="display: block;">сравнение</div> 
  <div class="hide comp">сравнение</div> 
  <div class="hide comp_not">Убрать</div> 
</div>