javascript - 请问各位一个插入节点之后在删除的问题
PHPz
PHPz 2017-04-11 10:57:25
0
3
231
var template='<p class="m-modal">\
      <p class="modal_align"></p>\
      <p class="modal_wrap">\
        <p class="bk"></p>\
        <p class="modal_body">\
          <h3>登录网易云课堂</h3>\
          <p class="form1">\
            <input value="账号">\
          </p>\
          <p class="form2">\
            <input value="密码">\
          </p>\
          <button class="submit">登录</button>\
        </p>\
      </p>\
    </p>'

var container;
function html2node(str){
    container = document.createElement('p');
    container.innerHTML = str;
    return container.children[0];
}
var _layout=html2node(template);
var show=function(){
  var asd=document.getElementById("parent");
  asd.appendChild(_layout);
}

我用这个函数把一个登录框template差进了parent这个节点,.bk的背景为叉子,请问我如何通过点击删除这个节点,如果用
var contain=_layout.cloneNode(true);
function close(){
document.body.removeChild(contain);
}
container.querySelector('.bk').addEvenListener('click',close());浏览器会提示body中没有contain这个节点,请问各位大哥我该怎么办啊?

PHPz
PHPz

学习是最好的投资!

全部回复(3)
小葫芦
/*
//container.querySelector('.bk')返回的符合要求的第1个元素,而非元素集合,所有会报下面评论中提到的undefined错误
var contain=_layout.cloneNode(true);//为什么要cloneNode
container.querySelector('.bk')[0].addEventListener('click', function(event){
    var targetDom=event.target;
    targetDom.removeChild(_layout);
});
*/
//完整的代码
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="parent"></p>
<input type="button" id="ShowDom" value="Show"/>
<script>


    function html2node(str){
        var container = document.createElement('p');
        container.innerHTML = str;
        return container;
    }

    var show=function(){
        var template='<p class="m-modal">\
      <p class="modal_align"></p>\
      <p class="modal_wrap">\
        <p class="bk">CLOSE*</p>\
        <p class="modal_body">\
          <h3>登录网易云课堂</h3>\
          <p class="form1">\
            <input value="账号">\
          </p>\
          <p class="form2">\
            <input value="密码">\
          </p>\
          <button class="submit">登录</button>\
        </p>\
      </p>\
    </p>';
        var container=html2node(template);
        var asd=document.getElementById("parent");
        asd.appendChild(container);
        var closeDom=asd.querySelector(".bk");
        var close=function(){
            closeDom.removeEventListener("click",close,false);
            container.parentNode.removeChild(container);
            document.getElementById("ShowDom").style.display="block";
        };
        closeDom.addEventListener("click",close,false);
    };


    document.getElementById("ShowDom").addEventListener("click",function(event){
        show();
        event.target.style.display="none";
    },false);


</script>
</body>
</html>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!