How to make a "Print" button disappear.

Question

I followed one example:

I have a print image button. When clicked, the button opens the print dialog and then I want to hide the image button.

But, initially I am not able to see the print button to click on it.

<link href="style-print.css" rel="stylesheet" media="print"  type="text/css">
#print {
display: none; 
}

<div style="float: right;" id="print">
<input id="print-bnt" type="button" onclick="callprint()"/> </div>

I hope before display the page, button goes to hide. (???)

I want to hide the "print button" after it's clicked.

What do I have to change here?

Answer 1

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

        .disnone{
           display: none; 
        }
        .fr{
           float: right;
        }

        <div class="fr" id="print">
            <input id="print-bnt" type="button" onclick="callprint()"/> 
        </div>


    <script>
    function callprint(){

      // js 
      addClass(document.getElementById("print"), "disnone");

      // jquery 
      $("#print").addClass("disnone");

      // print process js code .... 

    }

    function viewprint(){

      // js 
      removeClass(document.getElementById("print"), "disnone")


      // jquery 
      $("#print").removeClass("disnone");



    }
    </script>

// javasciprt 

function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}

function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

Answer 2

Your code underneath the link starting with #print is hiding the button at first. Just move that whole block to style-print.css.

#print {
    display: none;
}

Having that code within the page makes it so that the div with the id="print" is always hidden, regardless of the media. Putting it in the print stylesheet will make it so that when someone prints, that stylesheet it activated, it sees to hide anything with an id="print", and your button will go away in the print preview and also the printed page.