How to remove a div in javascript with no jquery?

Question

I'm trying to remove a div when you login (I know it's not secure!). I need it in javascript! I tried everything but it doesn't want to remove. the code is here ---------------------------------------------------------------------------------------> I KNOW IT'S NOT SECURE! For some reason the script doesn't work! tried everything I know in javascript.

var box = document.getElementById("loginbox");
function pasuser(form) {
if (form.email.value=="GG@gmail.com") {
console.log(form.email.value)
if (form.password.value=="123") {
  //window.location.assign('/index2.html');
  var next = document.createElement("IFRAME");
  next.src='https://codepen.io';
  next.classList.add("codepen");
  document.body.appendChild(next);
  //box.classList.remove("box");
  //box.style.display = "none";
  box.parentNode.removeChild(box);
  //box.outerHTML = "";
} else {
alert("Invalid Password");
}

} else {  alert("Invalid UserID");
}
}

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url(https://i.ytimg.com/vi/WLs_DST6dTA/maxresdefault.jpg);
  background-size: cover;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 400px;
  padding: 40px;
  background: rgba(0,0,0,.8);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.5);
  border-radius: 10px;
}
.box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}
.box h2:hover{
  letter-spacing: 5px;
}
.box .inputBox {
  position: relative;
}
.box .inputBox input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.box .inputBox label {
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: 1px;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label {
  top: -24px;
  left: 0;
  color: #03a9f4;
  font-size: 12px;
}
.box .inputBox input:focus,
.box .inputBox input:valid  {
  top: -26px;
  left: 0;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
}

.box .inputBox input:active + .placeholder {
  color: #fff;
}
.box .inputBox input:focus{
  border: solid 1px #03a9f4;
  border-radius: 5px;
  
}
.box input[type="button"] {
  background: transparent;
  border: 2px solid #03a9f4;
  outline: none;
  color: #03a9f4;
  text-align: center;
  font-size: 15px;
  padding: 10px 20px;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 5px;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease;
}
.box input[type="button"]:hover{
  border: 2px solid #03a9f4;
  background: #03a9f4;
  color: #fff;
  text-align: center;
  outline: none;
  font-size: 15px;
  padding: 10px 20px;
}
.codepen {
  width: 100%;
  border: none;
  height: 620px;
}
.hide {
display:none !important;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/style.css">
  <script src="/server.js"></script>
  <script src="/next.js"></script>
  <title></title>
</head>
<body>
  <div id="loginbox" class="box">
    <h2>Login</h2>
    <form autocomplete="on" method="post" action="./index2.html">
      <div class="inputBox">
        <input id="email" type="email" name="email" required="" placeholder="Username" autocomplete="email" dir="ltr" autocapitalize="none">
        <label>Username</label>
      </div>
      <div class="inputBox">
        <input id="password" type="password" name="pass" required="" placeholder="Password" autocomplete="new-password" dir="ltr" autocapitalize="off" autocorrect="off">
        <label>Password</label>
      </div>
      <input id="submitBtn" type="button" value="Submit" onclick="pasuser(form)">
    </form>
    </div>
</body>
</html>

Possible duplicate of [Remove element by id](https://stackoverflow.com/questions/3387427/remove-element-by-id) — aaaaane, Feb 08 '19 at 13:02

aaaaane · Accepted Answer · 2019-02-08T13:08:26.063

0

Try with:

document.getElementById("loginbox").remove();

to fit in your code:

box.remove();

edited Feb 08 '19 at 13:08

answered Feb 08 '19 at 13:06

aaaaane

187
1
15

I just tried copying and pasting your code into an html file and it works perfectly. Could you just check the message you get on the console and paste it here? – aaaaane Feb 08 '19 at 13:15
1

Thanks forgot to refresh page! – AG38 Feb 08 '19 at 13:19

How to remove a div in javascript with no jquery?

1 Answers1