问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问各位一个插入节点之后在删除的问题

头像
金富翁
    366871109
    var template='<div class="m-modal">\
      <div class="modal_align"></div>\
      <div class="modal_wrap">\
        <div class="bk"></div>\
        <div class="modal_body">\
          <h3>登录网易云课堂</h3>\
          <div class="form1">\
            <input value="账号">\
          </div>\
          <div class="form2">\
            <input value="密码">\
          </div>\
          <button class="submit">登录</button>\
        </div>\
      </div>\
    </div>'

var container;
function html2node(str){
    container = document.createElement('div');
    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这个节点，请问各位大哥我该怎么办啊？

    javascript
    阅读 2.9k
    3 个回答
    得票最新
    头像
    leftstick
      27.3k33329

      你确定这种写法是OK的！

      container.querySelector('.bk').addEvenListener('click',close());

      不是应该改成

      container.querySelector('.bk').addEvenListener('click', close);
      头像
      crazy_mule
        1962126

        我插，单词都写错，addEventListener。还有不考虑ie的感受么？

        头像
        kikong
          19.1k31320
          /*
//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>

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


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

    var show=function(){
        var template='<div class="m-modal">\
      <div class="modal_align"></div>\
      <div class="modal_wrap">\
        <div class="bk">CLOSE*</div>\
        <div class="modal_body">\
          <h3>登录网易云课堂</h3>\
          <div class="form1">\
            <input value="账号">\
          </div>\
          <div class="form2">\
            <input value="密码">\
          </div>\
          <button class="submit">登录</button>\
        </div>\
      </div>\
    </div>';
        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>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题