How to use JQuery to remove dynamic content?

Question

I have an html page that is generated by a CMS. I cannot modify the page, but can add JavaScript.

Each time the page loads, a JavaScript function (that I cannot modify) dynamically inserts a paragraph onto the page.

How can I use JQuery to .remove() that paragraph whenever it is loaded?

For example, when the page first loads, it look like this (blank):

<div></div>

Then, a few seconds later, a JavaScript function (that I have no control over) adds a paragraph to the page. The page then looks like this:

<div><p id="foo">bar</p></div>

How can I use JQuery to remove the paragraph with id=foo each time it is dynamically loaded onto the page?

Answer 1

You can use the liveQuery plugin for this:

$("#foo").livequery(function() {
  $(this).remove();
});