Question

我正在尝试在收到XMPHttpRequest响应后从我的页面中删除div。我还尝试使用以下方法将div的显示设置为none：document.getElementById（＆＃39; password＆＃39;）。style.display =＆＃39; none＆＃39 ;;但那也没有用。

HTML：

 <div class="login-container">
      <div class="title">Login Form</div>
      <div class="form-fields" id="form-fields">
           <form name="login_form" method="post" id="login-form" onsubmit="return submitForm()">
                <input type="text" name="username" id="username" placeholder="Username" required></input>
                <input type="password" name="password" id="password" placeholder="Password" required></input>
                <input type="submit" value="Log in" id="submit-button"></input>
                <input id="sessionID" class="hidden"></input>
           </form>
      </div>
      <div id="success-message" class="hidden">Congratulations! You have been logged in.</div>
      <button id="logout" class="hidden"></button>
 </div>

Javascript功能：

 function sendLoginInfo() {
      var loginRequest = new XMLHttpRequest();
      loginRequest.open("POST", "server/login.php", false);
      loginRequest.setRequestHeader('Content-type', "application/json");
      loginRequest.onreadystatechange = function () {
           if(loginRequest.readyState == 4 && loginRequest.status == 200) {
                sessionID = keyRequest.responseText;
                var el = document.getElementById( 'password' );
                el.parentNode.removeChild( el );

           }
      }
      loginRequest.send(JSON.stringify(JSONFormData));
 }

更新

通过更改以下问题解决了这个问题：

<form name="login_form" method="post" id="login-form" onsubmit="return submitForm()">

要：

<form name="login_form" method="post" id="login-form" onsubmit="submitForm(); return false;">

Answer 1

而不是

document.getElementById('password').style.display = 0;

试

document.getElementById('password').style.display = 'none';

Answer 2

据我所知，您无法真正删除div，但您可以将div的可见性设置为“none”（不是“0”，因为您尝试过）。

style="display:none"

这使div不可见，并且不会有任何空格。

使用JavaScript从页面中删除div

2 个答案: