Hide buttons when printing

Answer 1

You can use CSS @media queries. For instance:

@media print {
  #printPageButton {
    display: none;
  }
}

<button id="printPageButton" onClick="window.print();">Print</button>

The styles defined within the @media print block will only be applied when printing the page. You can test it by clicking the print button in the snippet; you'll get a blank page.

Answer 2

You can use a css media query to target print:

@media print {
  .hide-print {
    display: none;
  }
}

Answer 3

Assign an id to the other 2 buttons. For the POST NEWS button you can set id to postnews and RE-ENTER THE NEWS to reenterthenews; Then do this

function printpage() {

    //Get the print button and put it into a variable
    var printButton = document.getElementById("printpagebutton");
    var postButton = document.getElementById("postnews");
    var reenterButton = document.getElementById("reenterthenews");

    //Set the button visibility to 'hidden' 
    printButton.style.visibility = 'hidden';
    postButton.style.visibility = 'hidden';
    reenterButton.style.visibility = 'hidden';

    //Print the page content
    window.print()

    //Restore button visibility
    printButton.style.visibility = 'visible';
    postButton.style.visibility = 'visible';
    reenterButton.style.visibility = 'visible';

}

HTML

<div id="options">
<input type="submit" id="postnews" value="post news" >
<input id="printpagebutton" type="button" value="print news" onclick="printpage()"/>
<input type="button" id="reenterthenews" value="re-enter the news">
</div>