mPDF隐藏HTML元素

Question

I'm looking for a way to hide certain HTML elements when mPDF generates a PDF from a form so they do not render on the PDF, in this case, a div.

JavaScript does not work with mPDF so

visibility="hidden" on submit does not work nor does display="none" .

Hard-coding visibility="hidden" in a style attribute does work but obviously that would make the element unusable.

EDIT: More code:

Div I'm trying to hide.

    <div class="initial-container">
        <form id="initial" action="checkpage.php" method="post">
            <input type="hidden" id="page-num" name="page-num" value="1">
            <input type="text" class="initial" name="initials[]" placeholder="Initials" value="<?php if($initialsEntered == 'true'){ echo $initials; }  ?>">
            <input type="submit" class="submit" name="submit" value="Next Page" id="submit">
            <p class="page-num">Page 1/6</p>
        </form>
    </div>

Generate PDF code on separate page:

if(isset($_GET["pdf"])){
    $pdf = new mPDF('utf-8', '', '', '', 0, 0, 0, 0, 0, 0); 
    $pdf->SetDisplayMode('fullpage');
    $pdf->list_indent_first_level = 0;  // 1 or 0 - whether to indent the first level of a list

    $pages = ["page-one.php", "page-two.php", "page-three.php", "page-four.php", "page-five.php"];

    $pageCount = 0;
    while($pageCount < count($pages)){
        ob_start();
        include $pages[$pageCount]; 
        $template = ob_get_contents();
        ob_end_clean();
        $pdf->WriteHTML($template);
        $pdf->AddPage();
        $pageCount++;
    }

    $pdf->Output("probate-agreement.pdf", "I");
}

At first I attempted:

get("submit").onclick = function(){
     get("initial-container").style.visibility = "hidden";
}

But this does not work.

Answer 1

I figured it out.

I just used a separate CSS page with media="print" to hide specific elements. I attempted it before but it did not work, but now I found out that mPDF does not yet support the display property for non-block level elements.

Wrap whatever element you want to control with a block level element and hide the block element in the stylesheet:

<p class="hide-this">
    <input type="submit" class="what-i-want-to-hide">
</p>