phpstudy集成环境

 首页 > 为什么我用removeChild（）删除不了节点呢？

为什么我用removeChild（）删除不了节点呢？

慕课网清风老师的《弹出层效果》这部教程中。http://www.imooc.com/learn/58

当点击登陆按钮时候，生成一个透明度为50%的‘遮罩层’和一个登陆框。这个已经成功实现了，没有问题。

但是，现在我想点击关闭按钮，关闭遮罩层和登陆框。（见77-83行代码）我用removeChild来删除之前生成的节点却不成功，请问是哪里出问题了？
效果如下动态图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕课网-弹出层</title>
<style type="text/css">
*{margin:0; padding:0;}
#close{ 
    background:url(img/close.png) no-repeat; 
    width:30px; 
    height:30px; 
    cursor:pointer; 
    position:absolute; 
    right:5px; 
    top:15px; 
    text-indent:-999em;
    }
#mask{ 
    background-color:#000;
    opacity:0.5;
    filter: alpha(opacity=50); 
    position:absolute; 
    left:0;
    top:0;
    z-index:1000;
    }
#login{ 
    position:fixed;
    z-index:2001;

    }
.loginCon{ 
    position:relative; 
    width:670px;
    height:380px;
    background: url(img/loginBg.png) #2A2C2E center center no-repeat;
    }
</style>
<link type="text/css" rel="stylesheet" href="style/main.css" />
<script>
window.onload=function (){
    
    
    
    var sheight=document.documentElement.scrollHeight;//获取页面高度
    var swidth =document.documentElement.scrollWidth;//获取页面宽度
    
    var wheight=document.documentElement.clientHeight;//获取可视区域的高度
    var wwidth=document.documentElement.clientWidth;//获取可视区域的宽度
    
    var obtn=document.getElementById('btnLogin');//抓取id为btnLogin的登陆按钮
    
    obtn.onclick=function (){//点击登陆按钮时创建  1.遮罩层；  2.创建登陆框
    var omask=document.createElement('div');//创建一个'遮罩层'div
    omask.id='mask';//设定div的id为mask
    omask.style.height=sheight+'px';//给遮罩层设定高度为页面高度
    omask.style.width=swidth+'px';//给遮罩层的宽度设定为页面宽度
    document.body.appendChild(omask);//把创建好的omask节点插入到页面中

    var ologin=document.createElement('div');//创建一个'登陆框'div
    ologin.id='login';//设定该div的id为login
    
    ologin.innerHTML="<div class='loginCon'><div id='close'></div></div>";
    
    
    document.body.appendChild(ologin);//将ologin节点插入到页面中
    /*
    下面两行是给ologin做定位，使其永远在页面的中心位置
     top为 (可视高度-ologin高度)/2
     width为 (可视宽度-ologin宽度)/2
    */
    ologin.style.top=(wheight-ologin.offsetHeight)/2+'px';  
    ologin.style.left=(wwidth-ologin.offsetWidth)/2+'px';   
    }
    
    
    var oclose=document.getElementById('close');//获取id为close的关闭按钮。注：该按钮在之前点击登陆按钮建立的登陆框上
    oclose.onclick=function (){//当点击关闭按钮时，执行1.删除遮罩层；2.删除登陆框
        document.body.removeChild(omask);
        document.body.removeChild(ologin);
        }        
        
        
        
        }
    
    
</script>
</head>

<body>
<div id="header">
  <div class="container" id="nav">
    <h1 id="logo"><a href="/">慕课网</a></h1>
    <ul class="l" id="nav-item">
      <li> <a href="/course/list">课程</a> </li>
    </ul>
    <div id="login-area">
      <button id="btnLogin" hidefocus="true" class="login-btn">登录</button>
    </div>
  </div>
</div>

<div id="main">
    <div class="slider-container">
      <div id="slider">
        <ul id="sliderUl">
          <li id="bg01"></li>
        </ul>
        <div id="dotBox"><span class=""></span><span class="active"></span><span class=""></span></div>
      </div>
      <div id="discripcontainer">
        <div class="discripbg"></div>
        <div class="discrip">
          <h3>换一种方式</h3>
          <h2>来学习互联网编程</h2>
          <h4>超酷的IT技术免费学习平台</h4>
          <div class="btnarea"> <a id="enterbtn" href="/course/list">进入</a> <a id="learnmore" href="javascript:;">了解更多</a> </div>
        </div>
      </div>
    </div>
    <div id="freshcourse" class="waper">
      <h2><span>每一节课都有一种新奇的感觉</span></h2>
      <ul id="freshcourseList">
        <li><a href="/course/view/id/48"><img width="280" height="170" alt="IT菜鸟逆袭指南（江湖篇）" title="IT菜鸟逆袭指南（江湖篇）" src="http://img.mukewang.com/530c732400013e5106000338-300-170.jpg">
          <h5>IT菜鸟逆袭指南（江湖篇）</h5>
          <p>屌爆了！码农逆袭有秘诀，看“挨踢（IT）”小菜鸟慕无忌如何成为技术“土豪”。</p>
          <div class="tips"><span class="l">16人参加</span> <span class="r">课程时长：1小时</span></div>
          </a></li>
        <li><a href="/course/view/id/46"><img width="280" height="170" alt="分享：HTML5离线应用实战演练" title="分享：HTML5离线应用实战演练" src="http://img.mukewang.com/5305da0d0001ab9306000338-300-170.jpg">
          <h5>分享：HTML5离线应用实战演练...</h5>
          <p>FT Web App是少数真正实现了离线阅读体验的移动应用之一，一起来剖析它的技术吧！ </p>
          <div class="tips"><span class="l">39人参加</span> <span class="r">课程时长：2小时</span></div>
          </a></li>
        <li class="mr0"><a href="/course/view/id/43"><img width="280" height="170" alt="分享：移动优先的跨终端 Web" title="分享：移动优先的跨终端 Web" src="http://img.mukewang.com/52e618d80001a7e106000338-300-170.jpg">
          <h5>分享：移动优先的跨终端 Web</h5>
          <p>不可多得的学习宝典，移动互联时代，您必须知道的跨终端技术。</p>
          <div class="tips"><span class="l">261人参加</span> <span class="r">课程时长：1小时</span></div>
          </a></li>
        <li><a href="/course/view/id/41"><img width="280" height="170" alt="分享：响应式布局" title="分享：响应式布局" src="http://img.mukewang.com/52e5ed2300011d2706000338-300-170.jpg">
          <h5>分享：响应式布局</h5>
          <p>让网站兼容不同终端不再是梦，为解决移动互联网浏览而诞生。</p>
          <div class="tips"><span class="l">148人参加</span> <span class="r">课程时长：1小时</span></div>
          </a></li>
        <li><a href="/course/view/id/42"><img width="280" height="170" alt="案例：表单美化" title="案例：表单美化" src="http://img.mukewang.com/52e5f6ef000114ab06000338-300-170.jpg">
          <h5>案例：表单美化</h5>
          <p>追求不凡，一次学习四类表单控件的美化，让所有平淡的表单控件瞬间美好起来！</p>
          <div class="tips"><span class="l">105人参加</span> <span class="r">课程时长：2小时</span></div>
          </a></li>
        <li class="mr0"><a href="/course/view/id/44"><img width="280" height="170" alt="案例：表单验证" title="案例：表单验证" src="http://img.mukewang.com/52e62c09000162fd06000338-300-170.jpg">
          <h5>案例：表单验证</h5>
          <p>技术升级必修内容！ 通过对学习输入框的验证，轻松掌握正则表达式的用法！</p>
          <div class="tips"><span class="l">81人参加</span> <span class="r">课程时长：1小时</span></div>
          </a></li>
      </ul>
    </div>
    
    
    <a id="enterbtn-large" href="/course/list">点击进入</a>
    <div id="indexVideo">
      <button class="btn-close"></button>
      <div id="J_Video"></div>
    </div>
  </div>

<div id="footer">
<div class="waper">
<div class="footer_logo">
</div>
<ul class="footerwaper">
<li class="des"><span style="">我们的使命：</span>传播互联网最前沿技术，帮助更多的人实现梦想！<br><br>

<p>
京ICP备 13046642号-2
</p>
</li>

<li>
<p><a href="http://www.imooc.com/">网站首页</a></p>
<p><a href="/about/us">关于我们</a></p>
<p><a href="/about/job">人才招聘</a></p>
</li>

<li>
<p> <a href="/about/recruit">内容招募</a></p>
<p> <a href="/about/contact">联系我们</a></p>
<p> <a href="/user/feedback">意见反馈</a></p>
</li>

<li class="attention">
在这里关注我们的动向
<br>
<a id="qzone" href="http://user.qzone.qq.com/1059809142/" target="_blank" title="QQ空间">QQ空间</a> 
<a id="sinaweibo" href="http://weibo.com/u/3306361973" target="_blank" title="新浪微博">新浪微博</a>
<a id="qqweibo" href="http://t.qq.com/mukewang999" target="_blank" title="腾讯微博">腾讯微博</a>
<!-- <a id="weixin" href="#" title="腾讯微博">腾讯微博</a>
--></li>

</ul>
</div>
</div>

<div id="mask"></div>

<!--<div id="login">
<div class="loginCon">
<div id="close"></div>
</div>
</div>-->

</body>
</html>

换一种方式思考，半透明的遮罩层、关闭按钮、login模块不用js来添加，在DOM里写好 设置display:none,什么时候要显示js设置为block，也不会妨碍页面加载时获取它们的id
那就这样写：
var sheight=document.documentElement.scrollHeight;//获取页面高度
var swidth =document.documentElement.scrollWidth;//获取页面宽度

var wheight=document.documentElement.clientHeight;//获取可视区域的高度
var wwidth=document.documentElement.clientWidth;//获取可视区域的宽度

var obtn=document.getElementById('btnLogin');//抓取id为btnLogin的登陆按钮

obtn.onclick=function (){//点击登陆按钮时创建 1.遮罩层； 2.创建登陆框

var omask=document.createElement('div');//创建一个'遮罩层'div
omask.id='mask';//设定div的id为mask
omask.style.height=sheight+'px';//给遮罩层设定高度为页面高度
omask.style.width=swidth+'px';//给遮罩层的宽度设定为页面宽度
document.body.appendChild(omask);//把创建好的omask节点插入到页面中

var ologin=document.createElement('div');//创建一个'登陆框'div
ologin.id='login';//设定该div的id为login

ologin.innerHTML="<div class='loginCon'><div id='close'></div></div>";

document.body.appendChild(ologin);//将ologin节点插入到页面中
/*
 下面两行是给ologin做定位，使其永远在页面的中心位置
 top为 (可视高度-ologin高度)/2
 width为 (可视宽度-ologin宽度)/2
 */
ologin.style.top=(wheight-ologin.offsetHeight)/2+'px';
ologin.style.left=(wwidth-ologin.offsetWidth)/2+'px';
closeThis(omask,ologin);

}
function closeThis(node,log){

var oclose=document.getElementById('close');//获取id为close的关闭按钮。注：该按钮在之前点击登陆按钮建立的登陆框上
oclose.onclick=function (){//当点击关闭按钮时，执行1.删除遮罩层；2.删除登陆框
    document.body.removeChild(node);
    document.body.removeChild(log);
}

}

因为压根找不到close这个btn啊。
你得在渲染完这个overlay之后才能找到close这个btn 再执行。因为是跑完代码，你的closebtn还没写进去呢

【热门文章】
【热门文章】