Remove div from page with JavaScript

Question

I am trying to remove a div from my page once i receive an XMPHttpRequest response. I have also tried setting the display of the div to none using: document.getElementById('password').style.display = 'none'; but that didnt work either.

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:

 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));
 }

Update

This problem was solved by changing:

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

To:

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

Also see this: http://stackoverflow.com/questions/3387427/javascript-remove-element-by-id — Daniel K., Oct 30 '14 at 22:35
The code, as written, should work **if** `var el = document.getElementById( 'password' )` is executed and returns an element. — RobG, Oct 30 '14 at 22:46
Add a `console.log('removing password field');` in the `if` statement to make sure your code is actually running. Chances are it's not. — sebnukem, Oct 30 '14 at 22:47
When i run console.log(el) it returns the proper element: [Log] (login.html, line 51) — Micah, Oct 30 '14 at 22:47
but when i inspect my page in safari i still see the password div there — Micah, Oct 30 '14 at 22:48
the if statement is definitely getting entered because I am able to log from inside of it — Micah, Oct 30 '14 at 22:50
Setting the div display to 'none' won't remove it from the DOM, so the inspector will still see it (the users won't) — sebnukem, Oct 30 '14 at 22:52
but when i check the div in the safari inspector, display was not set to none — Micah, Oct 30 '14 at 22:58
i think it might be because the page is refreshed when the login button is clicked and therefore any style changes are discarded — Micah, Oct 30 '14 at 23:01

score -1 · Answer 1 · answered Oct 30 '14 at 22:34

-1

instead of

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

try

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

answered Oct 30 '14 at 22:34

patsimm

476
6
19

score -1 · Answer 2 · answered Oct 30 '14 at 22:34

-1

You can't really remove divs as far as I know but you can set the visibility of a div to "none" (not "0" as you tried it).

style="display:none"

This makes the div invisible and there won't be any white space.

answered Oct 30 '14 at 22:34

Dawesign

643
1
7
25

the css rules are all set in a different file. for some reason when i try to set the style it is not being set on the element – Micah Oct 30 '14 at 22:38

Remove div from page with JavaScript

2 Answers2