How to use jQuery to remove correctly in this case

Question

I have the following http://jsfiddle.net/ycysD/1/ script in which I try to remove a DOM element using funcion, I also have two events that perform this function, both perform the same thing, but in one case fails to execute

Sorry for the English and tell me if you need any other information.

Answer 1

The behavior is caused by a conflict in the code. When you click the close button, you create and delete the new .media-list-display .

  _close.bind('click',function(e){ //This line removes the .media-list-display div when //the close button is clicked $('.media-list a').live('click',function(e){ //This line adds a new .media-list-display div when any `<a>` //inside .media-list is clicked. 

The problem is that the close button is also the <a> inside the .media-list , so when it is clicked, it fires both events, creating an endless loop of deletion and creation.

Mark the link with warnings about conflicting parts.

Answer 2

I don't know if this is correct, but here is what I changed:

 function closeMediaList(what){ $('.media-list-display').fadeOut(function(){ what.remove(); }); }; 

what is an object that is being deleted, so instead of calling:

 closeMedialList(); 

You call:

 closeMediaList($(this)); 

Here is a demonstration of the changes: http://jsfiddle.net/t4u33/