Como ocultar um elemento ao imprimir uma página da web?

Eu tenho um link na minha página da Web para imprimir a página. No entanto, o link também é visível na própria impressão.

Existe um código javascript ou HTML que oculte o botão de link quando eu clicar no link de impressão?

Exemplo:

 "Good Evening"
 Print (click Here To Print)

Quero ocultar esta etiqueta "Imprimir" quando imprimir o texto "Boa noite". A etiqueta "Imprimir" não deve aparecer na própria impressão.

Na sua folha de estilo, adicione:

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

Em seguida, adicione class='no-print'(ou adicione a classe sem impressão a uma instrução de classe existente) ao seu HTML que você não deseja que apareça na versão impressa, como seu botão.

O Bootstrap 3 tem sua própria classe para isso chamada:

hidden-print

É definido assim:

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

Você não precisa defini-lo por conta própria.

No Bootstrap 4, isso foi alterado para:

.d-print-none

A melhor prática é usar uma folha de estilos especificamente para impressão e definir seu mediaatributo como print.

Nele, mostre / oculte os elementos que você deseja imprimir em papel.

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

Aqui está uma solução simples colocar esse CSS

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

e aqui está o 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>

ARQUIVO CSS

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


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

HEADER 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>

Você pode colocar o link em uma div e, em seguida, usar o JavaScript na tag anchor para ocultar a div quando clicada. Exemplo (não testado, pode ser necessário ajustar, mas você entendeu):

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

A desvantagem é que, uma vez clicado, o botão desaparece e eles perdem a opção na página (sempre há Ctrl + P).

A melhor solução seria criar uma folha de estilo de impressão e, dentro dessa folha de estilo, especificar o status oculto do printOptionID (ou o que você chamar). Você pode fazer isso na seção principal do HTML e especificar uma segunda folha de estilo com um atributo de mídia.

A melhor coisa a fazer é criar uma versão "somente impressão" da página.

Oh, espere ... isso não é mais 1999. Use um CSS de impressão com "display: none".

A resposta aceita por diodus não está funcionando para alguns, senão para todos nós. Eu ainda não conseguia ocultar meu botão Imprimir este do papel.

O pequeno ajuste por Clint Pachl de chamar o arquivo css adicionando

      media="screen, print" 

e não apenas

      media="screen"

está resolvendo esse problema. Portanto, para maior clareza e porque não é fácil ver Clint Pachl oculta ajuda adicional nos comentários. O usuário deve incluir ", print" no arquivo css com a formatação desejada.

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

e não apenas a mídia padrão = "tela".

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

Que eu acho que resolve esse problema para todos.

Se você tiver Javascript que interfere com a propriedade de estilo de elementos individuais, substituindo assim !important, sugiro manipular os eventos onbeforeprinte onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint