¿Cómo oculto un elemento cuando imprimo una página web?

Tengo un enlace en mi página web para imprimir la página web. Sin embargo, el enlace también es visible en la impresión misma.

¿Hay código JavaScript o HTML que ocultaría el botón de enlace cuando hago clic en el enlace de impresión?

Ejemplo:

 "Good Evening"
 Print (click Here To Print)

Quiero ocultar esta etiqueta "Imprimir" cuando imprime el texto "Buenas noches". La etiqueta "Imprimir" no debe aparecer en la impresión misma.

En su hoja de estilo agregue:

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

Luego agregue class='no-print'(o agregue la clase sin impresión a una declaración de clase existente) en su HTML que no desea que aparezca en la versión impresa, como su botón.

Bootstrap 3 tiene su propia clase para esto llamada:

hidden-print

Se define así:

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

No tiene que definirlo por su cuenta.

En Bootstrap 4 esto ha cambiado a:

.d-print-none

La mejor práctica es utilizar una hoja de estilo específicamente para imprimir y establecer su mediaatributo en print.

En él, muestre / oculte los elementos que desea imprimir en papel.

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

Aquí hay una solución simple poner este CSS

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

y aquí está el HTML

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

ARCHIVO CSS

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


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

Encabezado HTML

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

ELEMENTO

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

Puede colocar el enlace dentro de un div, luego usar JavaScript en la etiqueta de anclaje para ocultar el div cuando se hace clic. Ejemplo (no probado, puede ser necesario modificarlo, pero se entiende la idea):

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

La desventaja es que una vez que se hace clic, el botón desaparece y pierden esa opción en la página (aunque siempre hay Ctrl + P).

La mejor solución sería crear una hoja de estilo de impresión y dentro de esa hoja de estilo especificar el estado oculto de la printOptionID (o como se llame). Puede hacerlo en la sección de encabezado del HTML y especificar una segunda hoja de estilo con un atributo multimedia.

Lo mejor que puede hacer es crear una versión de la página "solo para imprimir".

Oh, espera ... esto ya no es 1999. Use una impresión CSS con "display: none".

La respuesta aceptada por diodus no funciona para algunos, si no para todos. Todavía no podía ocultar mi botón Imprimir este para que no salga al papel.

El pequeño ajuste por Clint Pachl de llamar al archivo CSS agregando

      media="screen, print" 

y no solo

      media="screen"

está resolviendo este problema. Entonces, para mayor claridad y porque no es fácil ver a Clint Pachl, ocultó ayuda adicional en los comentarios. El usuario debe incluir el ", imprimir" en el archivo CSS con el formato deseado.

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

y no solo el medio predeterminado = "pantalla".

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

Eso creo que resuelve este problema para todos.

Si tiene Javascript que interfiere con la propiedad de estilo de elementos individuales, anulando así !important, sugiero manejar los eventos onbeforeprinty onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint