Question

我有一个html / JavaScript项目，我正在努力，我遇到了问题。我正在为电子邮件简报制作一个注册表单，我将它放在页面中间的div元素中，如下所示：
（我知道，它的结构真的搞砸了，但我现在正在玩弄。）

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

我遇到的问题是我制作了下面的脚本，所以当你提交时，你会得到一条成功的消息和一个应该关闭div的按钮，离开网页：

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

当您点击“继续”按钮时，它应该运行“hide（）”函数：

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

我的问题是，当点击“继续”按钮时，它只会关闭<div id="nothin> 不像它应该“覆盖”。你知道为什么吗？我应该使用其他方法来关闭它吗？

以下是表单的CSS，如果没有它，它将无法正常工作：

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

Answer 1

在hide()函数中，您将“#overlay”元素的内容清空，而元素本身则为空。
一种解决方案可以隐藏元素这应该有效 -

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

Answer 2

假设您有一个像

这样的HTML代码

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

如果要从父级删除id“ChildHello”的子级，而不是仅仅将其可见性“隐藏”，则可以使用以下javascript

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

这有助于......（y）

如何使用JavaScript </div>删除<div>元素

2 个答案: