按下提交按钮时隐藏 div

Question

I want to permanently hide the <div class="frm_button_submitt" id="hideOnSubmit"> after pressing the submit button

I'm creating a multi-step form, what I mean when the user skips the first step, the div disappears

 <div class="frm_submit"> [if back_button]<button type="submit" name="frm_prev_page" formnovalidate="formnovalidate" class="frm_prev_page" [back_hook]>[back_label]</button>[/if back_button] <!-- When you click here for the first time --> <button class="frm_button_submit" type="submit" id="toggle" [button_action]>[button_label]</button> <!-- This div disappears in the following steps --> <div class="frm_button_submitt" id="hideOnSubmit"> <label><input type="checkbox" name="rememberMe" value="true" tabindex="4"><i class="a-icon a-icon-checkbox"></i><span class="a-label a-checkbox-label"> Keep me signed in. <span class="a-declarative" data-action="a-popover" data-a-popover="{&quot;activate&quot;:&quot;onclick&quot;,&quot;header&quot;:&quot;\\&quot;Keep Me Signed In\\&quot; Checkbox&quot;,&quot;inlineContent&quot;:&quot;\
    
    
    

This is a simple solution, using an enumerator, but I could not implement it, is there someone who can help me to write it correctly and completely

 const element = document.getElementById("#"); let clickCount = 0; element.addEventListener("click", (e) => { if(clickCount > 0) return element.style.display = "none"; console.log("Clicked") clickCount++; });

Note: The number of clicks next 4 clicks

Answer 1

You can use css to manage it.

window.addEventListener('load', () => {
  document.querySelector("#toggle").addEventListener("click", (e) => {
    document.querySelector("body").classList.add('hideTheButton');
  });
})

... and then just have a css rule:

body.hideTheButton #hideOnSubmit{
  display:none;
}

Answer 2

your question code is very clumsy. but you can hide in this way.

<script type="text/javascript">
  function hideDiv() {
    document.getElementById("hideOnSubmit").style.display = "none";
    return true;
  }
</script>

<div class="frm_submit">
  [if back_button]<button type="submit" name="frm_prev_page" formnovalidate="formnovalidate" class="frm_prev_page"
    [back_hook]>[back_label]</button>[/if back_button]

  <!-- When you click here for the first time -->
  <button class="frm_button_submit" type="submit" id="toggle" [button_action]
    onclick="return hideDiv()">[button_label]</button>

  <!-- This div disappears in the following steps -->
  <div class="frm_button_submitt" id="hideOnSubmit">
    <label><input type="checkbox" name="rememberMe" value="true" tabindex="4"><i
        class="a-icon a-icon-checkbox"></i><span class="a-label a-checkbox-label">
        Keep me signed in.
        <span class="a-declarative" data-action="a-popover"
          data-a-popover="{&quot;activate&quot;:&quot;onclick&quot;,&quot;header&quot;:&quot;\&quot;Keep Me Signed In\&quot; Checkbox&quot;,&quot;inlineContent&quot;:&quot;\u003cp>Choosing \&quot;Keep me signed in\&quot; reduces the number of times you're asked to Sign-In on this device.\u003c\/p>\n\u003cp>To keep your account secure, use this option only on your personal devices.\u003c\/p>&quot;}">
          <a id="remember_me_learn_more_link" href="javascript:void(0)" class="a-popover-trigger a-declarative">
            Details
            <i class="a-icon a-icon-popover"></i></a>
        </span>
      </span></label>
  </div>