<!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按钮没反应，这是为什么？是因为不能用添加的节点调用方法吗，还是我的代码哪里写错了？？
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
