各位大佬，求教。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按钮没反应，这是为什么？是因为不能用添加的节点调用方法吗，还是我的代码哪里写错了？？