各位大佬,求教。js给标签添加属性,再用其属性节点调用onclick方法没反应??

abc412061543 2020-07-17 03:01:27
<!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按钮没反应,这是为什么?是因为不能用添加的节点调用方法吗,还是我的代码哪里写错了??
...全文
1177 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
luj_1768 2020-07-18
  • 打赏
  • 举报
回复
con_value 可能是个const 类型的量,会被系统保护? 对象自释放可能会受限制? 现在大多数系统都不支持物理删除数据,对象释放都是延迟进行的,类似操作都只是由系统进行标记,等到系统维护时序再执行有关操作。 另外,有时候改变显示元素需要重写显示代码(增添显示元素时不需要,但是减少显示元素时这个操作很重要)。需要知道,运行的程序都在缓存中,系统很少会重复装载、卸载代码。
天际的海浪 2020-07-17
  • 打赏
  • 举报
回复

	<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(){
		        div_inr.removeChild(this.parentNode);
		    }
		}
		function removeBtn2(){
		    var op2 = this.parentNode;
		    op2.parentNode.removeChild();
		}
		btn_cla[0].onclick = addText;
	</script>

落落叶叶无声 2020-07-17
  • 打赏
  • 举报
回复
主要问题是你给删除按钮注册监听事件的地方不对。

<!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 = '';
            ob.onclick = function() { // <====注册事件添加在这里
              ob.closest('p').remove();
            }
		}
		function removeBtn2(){
		    var op2 = this.parentNode;
		    op2.parentNode.removeChild();
		}
		btn_cla[0].onclick = addText;
	</script>
</html>

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧