使用 JavaScript 从页面中删除 div答案

【问题标题】：Remove div from page with JavaScript使用 JavaScript 从页面中删除 div
【发布时间】：2014-10-30 22:28:15
【问题描述】：

我正在尝试在收到 XMPHttpRequest 响应后从我的页面中删除一个 div。我还尝试使用以下方法将 div 的显示设置为无： document.getElementById('password').style.display = 'none';但这也没有用。

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;">

【问题讨论】：

另见：stackoverflow.com/questions/3387427/…
你的if真的输入了吗？
所写的代码应该可以工作如果 var el = document.getElementById( 'password' ) 被执行并返回一个元素。
在if 语句中添加console.log('removing password field'); 以确保您的代码实际运行。很有可能不是。
当我运行 console.log(el) 它返回正确的元素：[Log] （login.html，第 51 行）

标签： javascript html css

【解决方案1】：

而不是

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

试试

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

【讨论】：

【解决方案2】：

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

style="display:none"

这使得 div 不可见并且不会有任何空白。

【讨论】：

css 规则都设置在不同的文件中。出于某种原因，当我尝试设置未在元素上设置的样式时