可否在利用函数创建一个元素时赋予id和onclick属性

时间：2022-08-31 09:06:00
<!DOCTYPE html>

<html>
	<head>
		<title>
		</title>	


	</head>


			<body>
				<div align="center">
				<br>				
				<br>
				<br>
				<button onclick="add()">ADD</button>
				<button onclick="delete()">DELETE</button>

				</div>

				<div name="target" id="target" align="center">


				</div>

				<script>
				function add() {
						var para=document.createElement("p");
						var node=document.createTextNode("This is new.");
						para.appendChild(node);
						var element=document.getElementById("target");
						element.appendChild(para);		
				}


				</script>

			</body>

</html>

想实现的功能是点击add按钮添加一个<p>，然后点击delete时删除一个<p>
add功能已实现，
想通过给每个添加的<p>元素赋一个id属性和一个onclick属性，onclick实现把自身的id传给temp变量，点击delete按钮后删除temp保存的id对应的<p>元素从而实现delete功能。

8 个解决方案

#1

想通过给每个添加的<p>元素赋一个id属性和一个onclick属性，onclick实现把自身的id传给temp变量
re:

id属性的值来自于哪里呢

#2

onclick实现把自身的id传给temp变量，点击delete按钮后删除temp保存的id对应的<p>元素从而实现delete功能。

re:

哪用这么费劲，只要delete函数触发就可以知道它的事件源，再根据事件源找你要删除的元素

#3

引用 1 楼 xiaofanku 的回复:
想通过给每个添加的<p>元素赋一个id属性和一个onclick属性，onclick实现把自身的id传给temp变量
re:

id属性的值来自于哪里呢

自己定义一个递增的id

#4

引用 2 楼 xiaofanku 的回复:
onclick实现把自身的id传给temp变量，点击delete按钮后删除temp保存的id对应的<p>元素从而实现delete功能。

re:

哪用这么费劲，只要delete函数触发就可以知道它的事件源，再根据事件源找你要删除的元素

想实现的功能是：
先点击一个add出来的<p>，然后点击delete键删除该<p>元素。

#5

引用 4 楼 ysrotciv 的回复:
Quote: 引用 2 楼 xiaofanku 的回复:

onclick实现把自身的id传给temp变量，点击delete按钮后删除temp保存的id对应的<p>元素从而实现delete功能。

re:

哪用这么费劲，只要delete函数触发就可以知道它的事件源，再根据事件源找你要删除的元素

想实现的功能是：
先点击一个add出来的<p>，然后点击delete键删除该<p>元素。


delete键是p元素的内部？还是全页面只有一个

#6

从下往上一个一个删除不就行了么，反正你添加是从上往下的 

 $('p').last().remove();

#7

如果画面上还有其他<p>的话，那就只删除target里面的<p> 

$('#target p').last().remove();

#8

同意楼上，直接remove最后一个就可以了 


				function del(){
					var target = document.getElementById("target")
					var para = target.getElementsByTagName("p");
					if(para.length > 0){
						target.removeChild(para[para.length-1]);
					}
				}


函数 delete() 改成 del()，要不然报错。

#1

想通过给每个添加的<p>元素赋一个id属性和一个onclick属性，onclick实现把自身的id传给temp变量
re:

id属性的值来自于哪里呢

#2

onclick实现把自身的id传给temp变量，点击delete按钮后删除temp保存的id对应的<p>元素从而实现delete功能。

re:

哪用这么费劲，只要delete函数触发就可以知道它的事件源，再根据事件源找你要删除的元素

#3

引用 1 楼 xiaofanku 的回复:
想通过给每个添加的<p>元素赋一个id属性和一个onclick属性，onclick实现把自身的id传给temp变量
re:

id属性的值来自于哪里呢

自己定义一个递增的id

#4

引用 2 楼 xiaofanku 的回复:
onclick实现把自身的id传给temp变量，点击delete按钮后删除temp保存的id对应的<p>元素从而实现delete功能。

re:

哪用这么费劲，只要delete函数触发就可以知道它的事件源，再根据事件源找你要删除的元素

想实现的功能是：
先点击一个add出来的<p>，然后点击delete键删除该<p>元素。

#5

引用 4 楼 ysrotciv 的回复:
Quote: 引用 2 楼 xiaofanku 的回复:

onclick实现把自身的id传给temp变量，点击delete按钮后删除temp保存的id对应的<p>元素从而实现delete功能。

re:

哪用这么费劲，只要delete函数触发就可以知道它的事件源，再根据事件源找你要删除的元素

想实现的功能是：
先点击一个add出来的<p>，然后点击delete键删除该<p>元素。


delete键是p元素的内部？还是全页面只有一个

#6

从下往上一个一个删除不就行了么，反正你添加是从上往下的 

 $('p').last().remove();

#7

如果画面上还有其他<p>的话，那就只删除target里面的<p> 

$('#target p').last().remove();

#8

同意楼上，直接remove最后一个就可以了 


				function del(){
					var target = document.getElementById("target")
					var para = target.getElementsByTagName("p");
					if(para.length > 0){
						target.removeChild(para[para.length-1]);
					}
				}


函数 delete() 改成 del()，要不然报错。
标签：

相关文章