Wie kann ich ein Element beim Drucken einer Webseite ausblenden?

Question

Ich habe auf meiner Webseite einen Link zum Drucken der Webseite. Der Link ist jedoch auch auf dem Ausdruck selbst sichtbar.

Gibt es einen Javascript- oder HTML-Code, der den Link-Button ausblendet, wenn ich auf den Druck-Link klicke?

Beispiel:

 "Good Evening"
 Print (click Here To Print)

Ich möchte dieses Etikett "Drucken" ausblenden, wenn der Text "Guten Abend" gedruckt wird. Das Etikett "Drucken" soll nicht auf dem Ausdruck selbst erscheinen.

Answer 1

Wie Elias Hasle sagte, kann JavaScript die !important . Also habe ich seine Antwort um eine theoretische Umsetzung erweitert.

Dieser Code identifiziert alle Elemente mit der Klasse no-print , blendet sie vor dem Druck mit CSS aus und stellt nach dem Druck den ursprünglichen Stil wieder her:

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
});