How do I hide an element when printing a web page?

Question

My Problem is when i click print option On my webpage it is print the webpage but "The Print Link Lable Also Visible On webpage".

So Please Give The Javascript Or HTML code To Hide The LInk Button When I Click The Print link

Example:
"Good Evening"

                       Print (click Here To Print)

I Want To Hide This "Print" Leble When it print The Text "Good Evening".After Printing Page this "Print" lable Will Not show on print Paper.

Answer 1

You could place the link within a div, then use JavaScript on the A tag to hide the div when clicked. Example (not tested, may need to be tweaked but you get the idea):

<div id="printOption">
<a href="javascript:void();" onclick="document.getElementById('printOption').style.visibility = 'hidden'; document.print(); return true;">Print</a>
</div>

The downside is that once clicked, the button disappears and they lose that option on the page (there's always Ctrl+P though).

The better solution would be to create a print stylesheet and within that stylesheet specify the hidden status of the printOption ID (or whatever you call it). You can do this in the head section of the HTML and specify a second stylesheet with a media attribute.

Answer 2

The best practice is to use a style sheet specifically for printing, and and set it's media attribute to print.

In it, show / hide the elements that you want to be printed on paper.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Answer 3

In your stylesheet add:

@media print {
.noPrint {
    display:none;
}
}

Then add class='noprint' (or add the noprint class to an exsiting class statement) in your HTML that you don't want to appear in the printed version, such as your button.

Answer 4

The best thing to do is to create a "print-only" version of the page.

Oh, wait... this isn't 1999 anymore. Use a print CSS with "display: none".

Answer 5

work perfect ...

but dont use document.print(); use only print();