js给标签添加属性,再用其属性节点调用onclick方法没反应??

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="outer_text">
                <input id="con_value">
                <button class="btn">增加</button>
                <button class="btn">拷贝</button>
                <button class="btn">删除</button>
                <div id="inner_text"></div>
            </div>
    </body>
    <script>
        var inp_out = document.getElementById("con_value");
        var btn_cla = document.getElementsByClassName("btn");
        var div_inr = document.getElementById("inner_text");
        function addText(){
            var op = document.createElement('p');
            var ob = document.createElement('button');
            ob.innerHTML = 'x';
            ob.setAttribute('class','btn2');
            op.innerHTML = inp_out.value;
            div_inr.appendChild(op);
            op.appendChild(ob);
            inp_out.value = '';
        }
        function removeBtn2(){
            var op2 = this.parentNode;
            op2.parentNode.removeChild();
        }
        btn_cla[0].onclick = addText;
        var p1 = document.getElementsByTagName('p');
        //var b1 = p1.getElementsByClassName('btn2');
        for(var i=0;i<p1.length;i++){
            p1[i].getElementsByClassName('btn2')[0].onclick = function(){
                //this.parentNode.removeChild(this.parentNode)
                console.log(this)
            }
        }
    </script>
</html>

本来的意思是要点击添加的<p>标签中的x按钮删除此行,但是点击x按钮没反应,这是为什么?是因为不能用添加的节点调用方法吗,还是我的代码哪里写错了??

阅读 2.5k
2 个回答

按你这样写绑定事件的时候元素根本不存在啊

<script>
  var inp_out = document.getElementById('con_value');
  var btn_cla = document.getElementsByClassName('btn');
  var div_inr = document.getElementById('inner_text');

  function addText() {
    var op = document.createElement('p');
    var ob = document.createElement('button');
    ob.innerHTML = 'x';
    ob.setAttribute('class', 'btn2');
    op.innerHTML = inp_out.value;
    div_inr.appendChild(op);
    op.appendChild(ob);
    inp_out.value = '';
    ob.onclick = function () {
      op.parentNode.removeChild(op);
    };
  }

  btn_cla[0].onclick = addText;
</script>

可以在添加的时候直接绑定事件,改成这样既可

最后循环是想为所有新增节点的x绑定事件对吧?
但是这个应该在新增节点之后执行,而不是在一开始就执行。
一开始的时候 var p1 = document.getElementsByTagName('p') 没有东西的,自然也绑定不了。
建议是在 addText 里面,给每一个 ob 都绑定上,再 op.appendChild(ob)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题