Question

I’m building a jQuery mini-plugin to show a print preview and then print the results of some reports that my application runs. I need the ability to not print certain sections (for example: reports that have no results, UI elements, etc). I’ve tried the css @media print to no avail. I don’t know why it doesn’t work, but I’ve implemented it exactly as described on the w3schools media types page and IE still wants to print those elements.

So I’ve decided to brute force it and just remove the .noPrint elements from a cloned DOM. As it turns out, this will solve a problem I was looking forward to having with my planned “output to .pdf” functionality.

My problem is that while

    $(clonedHtml).find('.noPrint') 

returns a collection of the noPrint elements quite nicely,

    $(clonedHtml).remove('.noPrint') 

doesn’t remove anything. I’ve also tried removing it like this:

    var removeMe = $(clonedHtml).find('.noPrint');
    clonedHtml.remove(removeMe);

Which obviously doesn’t work either. This syntax is based off the API documentation’s second example:

    $("p").remove(":contains('Hello')");
    Removes all paragraphs that contain "Hello" from the DOM. Analogous to doing 
    $("p").filter(":contains('Hello')").remove(). 

The real question: Why? I checked the API documentation for remove(), I’ve read everything I could find on google, and I’ve searched the jQuery forums and can’t find anything.

Answer 1

Try this instead:

$(clonedHtml).find('.noPrint').remove();