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 lin

Answer 1

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 2

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 3

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 4

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

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

<div>
  Yup
</div>

Answer 5

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 this has changed to:

.d-print-none

Answer 6

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".