fullcalendar.js - deleting event on button click

Question

I am using the fullCalendar.js and the current problem is making i lose so much time on something that might be simple to whose understand javascript (more specific jquery) better than me.

The link of my example is at the bottom but my main concern is this part:

eventClick: function(event){
  $(".closon").click(function() {
     $('#calendar').fullCalendar('removeEvents',event._id);
  });
},    

I want to delete an event from the calendar with my close button and not on direct click of the event. I already tried using the $element.click outside of the eventClick trigger but it closed all the events on the calendar and the max i could reach was this poor situation, where the user need to click first on the calendar event and after on the 'X' to delete it.

http://jsfiddle.net/59RCB/49/

Answer 1

Remove the eventClick function and replace the eventAfterAllRender function with this:

        eventRender: function(event, element) {
            element.append( "<span class='closeon'>X</span>" );
            element.find(".closeon").click(function() {
               $('#calendar').fullCalendar('removeEvents',event._id);
            });
        }