Question

I have a site with “sticky-note” feature. To align notes in site based on monitor resolution I’m using Isotope plug in.

 <script type="text/javascript">
$(function(){

  var $container = $('#sticky-note');

  $container.isotope({
    itemSelector: '.note',
    resizesContainer: true
  });

  // remove item if clicked
  $container.delegate( '.uzdaryti', 'click', function(){
    $container.isotope( 'remove', $(this) );
  });

});

The note:

    <li class="melynas note">
    <a href="#" class="uzdaryti">X</a>
    <p>Lorem ipsum dolor sit amet.</p>
    <div class="data">2012.10.17 13:42</div>
    </li>

I don’t know how to do that link with class .uzdaryti would remove the whole list item.
I’ve tried to change $(this) with $(‘.note’) but the clicking the link removes all the notes.

Answer 1

It isn’t necessary to use isotope to handle node deletions. You could just use jQuery to delete the correct element, and then trigger an isotope reLayout. For example,

$('.uzdaryti').click(function(){

    $(this).parent().remove();
    $container.isotope('reLayout');

    return false;

});