使用javascript / jquery完全删除具有特定类的div的所有实例？

Question

I am using Popup.js by Toddish. http://docs.toddish.co.uk/popup/demos/

Long story short, the popup plugin creates divs by default given the classes ".popup_back" and ".popup_cont". I have another button I wish to press which should completely delete the added divs with those classes after they have been generated and added to the html. As if they never even existed. Surely this is possible?

I have tried running a function which simply runs:

$(".popup_back").remove();
$(".popup_cont").remove();

As shown in this example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove

Unfortunately despite the code running, the actual divs are never deleted as required.

Any ideas? I am new to this kind of thing and have googled around and read a lot about DOM etc but am yet to crack it.

Thanks

EDIT: In reply to the comments:

The Javascript:

function removePopups() { // This function is called to remove the popups.
   console.log("removing...");
   $(".popup_back").remove();
   $(".popup_cont").remove();
}



function func(url) { // url is the url of the image to be displayed within the popup.
   removePopups(); // As soon as the function casillas is called, removePopups is used to remove any existing instances of the divs.

   $('a.theimage').popup({ // This is where the Popup plugin is utilised.
       content : $(url),
       type : 'html'
   });
}

The HTML:

<a class="theimage" onclick="func('image/image1.jpg')" href="#" >

Long story short, an image is displayed in the popup. I think the issue is that the popup plugin runs due to the class but the function func is never actually run when the click occurs. However simultaneously "removing..." still prints out in the console which tells me that the function IS being executed. The problem is I want the popup plugin to run together with the javascript function. Is there a solution for this conflict?

Answer 1

Your implementation should really be as simple as this:

<a class="theimage" href="#" >Open</a>

Bind the popup creation to your popup link:

$('a.theimage').popup({
    content : 'image/image1.jpg',
    type : 'html'
});

I'm speculating here, but what might be happening is that you're invoking the popup twice by binding the popup() call to a click handler in your markup. The popup plugin already binds the popup creation to a click event.

View working demo . Note the 3 external resource: the popup CSS, the popup JS, and the jQuery JS.