How do you remove a <div> element using JavaScript

Question

I have a html/JavaScript project that i am working on and i am encountering problems. I am making a sign-up form for an email newsletter and i have it in a div element in the middle of a page like so:
(i know, its structure is really messed up but i am just playing around right now.)

<div id="overlay"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center><div id="nothin" class="form">Sign Up For Our Newsletter<br><br>
 <table><TD width="50%" valign="middle"><img class="round"src="picture1.jpg" height="150" width="250"></td><td width="5%"></td><td width="40%" valign="middle"><form>
 <input type="text" class="round"required id="name" width="190"><br><br>
 <input type="email" class="round"required id="email" width="190"><br><br>
 <input id="submit"type="submit" class="button"value="Submit Your Email" onclick="success()"><br>
 </form></td></table></div></center></div>

The problem i have is i made the script below so when you submit you get a success message and a button that should close down the div, leaving the webpage:

<script>
 function success()
 {
 document.getElementById("nothin").innerHTML="<div id='form2'>Success!<br><br>Thank You!<br> You have successfully signed up for the Our newsletter!<br><button onclick='hide()' class='button'>Continue</button></div>";
 }
</script>

When you click on the button "continue" it should run the function "hide()":

<script>
function hide()
{
 document.getElementById("overlay").innerHTML="";
 }
 </script>

My problem is that when the "continue" button is clicked, it only closes <div id="nothin> not "overlay" like it should. Do you have any idea why? Should i use some other method to close it?

Here is the CSS for the form, it wont work that well without it:

 <style>
     #overlay {
        z-index: 16777271;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.8);

    }
    .form, .form2{
    background-color:white;
    color:black;
    width:500;
    height:250;
    align:center;
    border-radius: 40px;
    border:dashed darkgreen;
    }
    .round{
    border-radius:8px;
    }
    .button{
    background-color:green;
    border-color:green;
    border-radius:45px;
    height: 40px;
    width:190px;
    }
    .BUTTON:HOVER{
    background-color:darkgreen;
    border-color:darkgreen;
    border-radius:45px;
    }

    </style>

Kamehameha · Accepted Answer · 2014-03-08 21:46:27Z

2

In the hide() function you are making the contents of "#overlay" element empty while element itself, remains.
One solution can be hiding the element.
This should work -

function hide(){
    document.getElementById("overlay").style.visibility = 'hidden';
    /* 
    //or setting the display to none
    document.getElementById("overlay").style.display = 'none';
    */
}

edited Mar 8, 2014 at 21:46

answered Mar 8, 2014 at 21:40

Kamehameha

5,4781 gold badge25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hashem Qolami Over a year ago

Or style.display = 'none'.

RaghuRam2404 · Accepted Answer · 2014-03-08 22:09:05Z

0

Suppose you have a html code like

<div id ='parentWow'>
    <div id='ChildHello'>
        Some Content
    <div>
</div>

If you want to remove the child of id "ChildHello" from the parent, instead of just making their visibility "hidden", you can use the following javascript

document.getElementById("ChildHello").parentNode.removeChild(document.getElementById("ChildHello"))

This helps... (y)

answered Mar 8, 2014 at 22:09

RaghuRam2404

11 bronze badge

Collectives™ on Stack Overflow

How do you remove a <div> element using JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related