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

Question

I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.

Is there javascript or HTML code which would hide the link button when I click the print link?

Example:

 "Good Evening"
 Print (click Here To Print)

I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.

Answer 1

In your stylesheet add:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

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

Answer 2

Bootstrap 3 has its own class for this called:

hidden-print

It is defined like this:

@media print {
  .hidden-print {
    display: none !important;
  }
}

You do not have to define it on your own.

---

In Bootstrap 4 and Bootstrap5 this has changed to:

.d-print-none

Answer 3

The best practice is to use a style sheet specifically for printing, and set its 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 4

Here is a simple solution put this CSS

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

and here is the HTML

<div class="noprint">
    element that need to be hidden when printing
</div>

Answer 5

CSS FILE

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTML HEADER

<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

ELEMENT

<div class="no-print"></div>

Answer 6

You could place the link within a div, then use JavaScript on the anchor 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 7

@media print {
  .no-print {
    visibility: hidden;
  }
}

<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>

Answer 8

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 9

The accepted answer by diodus is not working for some if not all of us. I could not still hide my Print this button from going out on to paper.

The little adjustment by Clint Pachl of calling css file by adding on

      media="screen, print" 

and not just

      media="screen"

is solving this problem. So for clarity and because it is not easy to see Clint Pachl hidden additional help in comments. The user should include the ",print" in css file with the desired formating.

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

and not the default media = "screen" only.

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

That i think solves this problem for everyone.

Answer 10

If you have Javascript that interferes with the style property of individual elements, thus overriding !important, I suggest handling the events onbeforeprint and onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

Answer 11

As Elias Hasle said, JavaScript can override !important. So, I extended his answer with a theoretical implementation.

This code identifies all elements with the class no-print, hides them with CSS before printing, and restores the original style after printing:

var noPrintElements = [];

window.addEventListener("beforeprint", function(event) {
   var hideMe = document.getElementsByClassName("no-print");
   noPrintElements = [];
   Array.prototype.forEach.call(hideMe, function(item, index) {
      noPrintElements.push({"element": item, "display": item.style.display });
      item.style.display = 'none'; // hide the element
   });   
});

window.addEventListener("afterprint", function(event) {
   Array.prototype.forEach.call(noPrintElements, function(item, index) {
      item.element.style.display = item.display; // restore the element
   });      
   noPrintElements = []; // just to be on the safe side
});