isotope add close button

Question

online sample http://jsfiddle.net/QxdXW/ I am trying to add a close button to remove selected class however, cannot get the result I expected. I wanted the close button to remove selected and back to normal box size. also wanted to close the current red box once the next one triggered

HTML

<div class="item"><div class="close">X</div></div>

jQuery var $close = $('.close');

$close.click(function(){
var $this = $(this);
   $(this).parents('.item').removeClass('selected');

});

Answer 1

I don't know if this solution fits your needs but this is my fiddle

    $(function(){
    var $container = $('#container'), $items = $('.item');
    var $close = $('.close');
    $close.hide()
   $(document).on('click', '.close', function(e) {
      $(this).parent('div').toggleClass('selected')
      $close.hide()
      $container.isotope('reLayout')
    });

  $container.isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 60
    },
    getSortData : {
      selected : function( $item ){
        return ($item.hasClass('selected') ? -1000 : 0 ) + $item.index();
      }
    },
    sortBy : 'selected'
  })
  $items.click(function(){
    var $this = $(this);
    var cla=$this.attr('class')
       if(cla==="item isotope-item"){
          var what=$container.find('div.selected').attr('id')
          $('#'+what).removeClass('selected')
          $(this).addClass('selected')
          $close.show()
          $container
          .isotope( 'updateSortData', $this )
          .isotope()          
       }
  });
});

html:

<div id="container">
   <div class="item" id="a"><div class="close">X</div></div>
  <div class="item" id="b"><div class="close">X</div></div>
  <div class="item" id="c"><div class="close">X</div></div>
  <div class="item" id="d"><div class="close">X</div></div>
  <div class="item" id="e"><div class="close">X</div></div>
  <div class="item" id="f"><div class="close">X</div></div>
  <div class="item" id="g"><div class="close">X</div></div>
  <div class="item" id="h"><div class="close">X</div></div>
  <div class="item" id="i"><div class="close">X</div></div>
  <div class="item" id="l"><div class="close">X</div></div>
  <div class="item" id="m"><div class="close">X</div></div>
  <div class="item" id="n"><div class="close">X</div></div>
  <div class="item" id="o"><div class="close">X</div></div>
  <div class="item" id="p"><div class="close">X</div></div>
  <div class="item" id="q"><div class="close">X</div></div>
  <div class="item" id="r"><div class="close">X</div></div>
</div>

I do not know this plugin so I don't know if your goal was to get this.
If I'm wrong I'm sorry for your loss of time