Make button disappear when clicked

Question

I have the following code:

<script>
    function hidenow(id) {
        var divelement = document.getElementById(id);

        if(divelement.style.display == 'none')
                divelement.style.display =='block'; 
        else
                divelement.style.display = 'none';
                hidenow = button.style.visibility = "hidden";
    }
</script>

And

<br>
<p>Programma's waarop u kunt abonneren:</p>
<form action="#" enctype="multipart/form-data" method="post">
    <?php wp_nonce_field( 'set_programma_action', 'set_programma' ); ?>
    <table>
        <?php foreach ( $retrieve_data as $retrieved_data ) { ?>
            <tr>
                <th>Programma:</th>
                <td id="hideit" style="vertical-align: middle;">
                <?php
                 echo $alreadysub; echo esc_html( $retrieved_data->Anaam );
                 ?>
                 </td>
                <th>
                    <button id="hidebutton('hideb')" onclick="hidenow('hideit')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button>
                </th>
            </tr>
        <?php } ?>
    </table>
</form>

And

<br> 
<p>De programma's waarop u geabonneerd bent:</p>
<form action="#" enctype="multipart/form-data" method="post">
    <?php wp_nonce_field( 'set_programmatest_action', 'set_programmatest' ); ?>
    <table>
        <?php foreach ( $retrieve_data as $retrieved_data ) { ?>
            <tr>
                <th>Programma:</th>
                <td style="vertical-align: middle;"><?php echo esc_html( $retrieved_data->meta_value ); ?></td>
                <th>
                    <button name="programmatest" type="submit" id="button" value="<?php echo esc_attr( $retrieved_data->meta_value ); ?>">Abonnement opzeggen</button>
                </th>
            </tr>
        <?php } 
        ?>
    </table>
</form>

When the button is clicked, the element successfully disappears. The button however, does not. I do not know how to make sure the button itself also disappears. I have tried onClick = button.style.visibility = "hidden"; but it does not give any result.

How can I make sure that when I click the button, the button itself along with the element disappear (permanently)?

Answer 1

change

<button id="hidebutton('hideb')" onclick="hidenow('hideit')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button>

to

<button id="hide" onclick="hidenow('hide')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button>

You can't set a ID as a function (I'm assuming that's what you tried to do)

That should fix it

Answer 2

EDIT:

If you want to hide button after the form is submitted just set the isset($_POST['programma' if you set it do not show button if form is not submitted it will show.

replace your button code with code below.

if (isset($_POST['programma'])) {
  echo "";
} else  {
  echo '<button id="hidebutton" style="display:block" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button>';
}

Other wise you would need to store information if form is submitted in cookie or PHP Session and after reading that info show hide based on that with PHP/JS.

 function hidenow(id) { var divelement = document.getElementById(id); var button = document.getElementById("hidebutton"); if(divelement.style.display == 'none') divelement.style.display ='block', button.style.display = "block"; else divelement.style.display = 'none', button.style.display = "none"; }

 <br> <p>Programma's waarop u kunt abonneren:</p> <form action="#" enctype="multipart/form-data" method="post"> <?php wp_nonce_field( 'set_programma_action', 'set_programma' ); ?> <table> <?php foreach ( $retrieve_data as $retrieved_data ) {?> <tr> <th>Programma:</th> <td id="hideit" style="vertical-align: middle;"> <?php echo $alreadysub; echo esc_html( $retrieved_data->Anaam ); ?> </td> <th> </th> </tr> <?php }?> </table> </form> <button id="hidebutton" style="display:block" onclick="hidenow('hideit')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button>