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

User · Answer

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

User · Answer

x000D   x000D   media print   x000D     no-print   x000D      visibility  hidden  x000D      x000D    x000D   lt div class  no-print  gt  x000D    Nope x000D   lt  div gt  x000D   x000D   lt div gt  x000D    Yup x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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     lt div id  printOption  gt       lt a href  javascript void             onclick  document getElementById  printOption   style visibility    hidden           document print            return true   gt         Print      lt  a gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

CSS FILE    media print        pager      form       no-print               display  none  important          height  0               no-print   no-print            display  none  important          height  0            HTML HEADER   lt link href   theme css ui ui print css version x x x  media  print  rel  stylesheet  type  text css   gt    ELEMENT   lt div class  no-print  gt  lt  div gt

User · Answer

Here is a simple solution put this CSS  media print      noprint         display none          and here is the HTML  lt div class  quot noprint quot  gt      element that need to be hidden when printing  lt  div gt

User · Answer

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     lt div id  printOption  gt       lt a href  javascript void             onclick  document getElementById  printOption   style visibility    hidden           document print            return true   gt         Print      lt  a gt   lt  div gt    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

User · Answer

The best practice is to use a style sheet specifically for printing  and and set its media attribute to print   In it  show hide the elements that you want to be printed on paper    lt link rel  stylesheet  type  text css  href  print css  media  print    gt

User · Answer

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         lt link rel  stylesheet  href  my cssfile css  media  screen  print type  text css  gt    and not the default media    screen  only        lt link rel  stylesheet  href  my cssfile css  media  screen  type  text css  gt    That i think solves this problem for everyone

User · Answer

The best practice is to use a style sheet specifically for printing  and and set its media attribute to print   In it  show hide the elements that you want to be printed on paper    lt link rel  stylesheet  type  text css  href  print css  media  print    gt

User · Answer

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

User · Answer

x000D   x000D   media print   x000D     no-print   x000D      visibility  hidden  x000D      x000D    x000D   lt div class  no-print  gt  x000D    Nope x000D   lt  div gt  x000D   x000D   lt div gt  x000D    Yup x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

The best practice is to use a style sheet specifically for printing  and and set its media attribute to print   In it  show hide the elements that you want to be printed on paper    lt link rel  stylesheet  type  text css  href  print css  media  print    gt

User · Answer

The best practice is to use a style sheet specifically for printing  and and set its media attribute to print   In it  show hide the elements that you want to be printed on paper    lt link rel  stylesheet  type  text css  href  print css  media  print    gt

User · Answer

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

User · Answer

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

User · Answer

CSS FILE    media print        pager      form       no-print               display  none  important          height  0               no-print   no-print            display  none  important          height  0            HTML HEADER   lt link href   theme css ui ui print css version x x x  media  print  rel  stylesheet  type  text css   gt    ELEMENT   lt div class  no-print  gt  lt  div gt

User · Answer

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     lt div id  printOption  gt       lt a href  javascript void             onclick  document getElementById  printOption   style visibility    hidden           document print            return true   gt         Print      lt  a gt   lt  div gt    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

User · Answer

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

User · Answer

Here is a simple solution put this CSS  media print      noprint         display none          and here is the HTML  lt div class  quot noprint quot  gt      element that need to be hidden when printing  lt  div gt

User · Answer

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

User · Answer

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     lt div id  printOption  gt       lt a href  javascript void             onclick  document getElementById  printOption   style visibility    hidden           document print            return true   gt         Print      lt  a gt   lt  div gt    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

User · Answer

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         lt link rel  stylesheet  href  my cssfile css  media  screen  print type  text css  gt    and not the default media    screen  only        lt link rel  stylesheet  href  my cssfile css  media  screen  type  text css  gt    That i think solves this problem for everyone

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to printing