JQurey 添加和删除元素
2024-10-14 11:32:30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.baseDiv {
height : 1%;
width : 100%;
background-color : aqua;
}
.newDiv {
height : 1%;
width : 100%;
background-color : yellow;
margin-top : 1%;
cursor : pointer;
}
</style>
<body>
<button id="addDiv">添加div元素到baseDiv</button>
<div id="baseDiv" class="baseDiv">
<p>这里一个名为baseDiv的div</p>
<p>这是一个段落。</p>
</div>
<br>
<button id="removebaseDiv" >移除baseDiv</button>
<script>
var num = 1;
$(function(){
$('#addDiv').bind('click', function(event) {
$("<div id='div"+ num +"' onclick='removeDiv(this)' class='newDiv'>这是新增的div"+ num +",点击可以删除</div>").appendTo("#baseDiv");
num++;
});
})
$(function(){
$('#removebaseDiv').bind('click', function(event) {
$('#baseDiv').remove();
});
})
function removeDiv(node) {
$('#'+node.id+'').remove();
}
</script>
</body>
</html>
效果图
点击添加div元素到baseDiv
按钮
再次点击添加div元素到baseDiv
按钮
点击这是新增的div1,点击可以删除
点击移除baseDiv
按钮
最新文章
- gantt甘特图的制作过程
- JAVA下实现二叉树的先序、中序、后序、层序遍历(递归和循环)
- IOS开发之UI布局
- 第二百六十天 how can I 坚持
- [bug]Syntax error, unrecognized expression: input#ctl00$ContentPlaceHolder1$Pager_input
- asp.net页面按Enter键IE不提交表单
- 【翻译】Microsoft Ajax Minifier 快速使用指南(与VS集成使用) 编译后直接压缩项目的JS或CSS文件
- PAT (Advanced Level) 1006. Sign In and Sign Out (25)
- python已安装了一个包,但是导入包中的模块时报错没有这个包
- Android6.0 源码修改之Settings音量调节界面增加通话音量调节
- CEF 支持的命令行参数
- Python&#160;一键commit文件、目录到SVN服务器
- HDU - 5073 Galaxy(数学)
- Ajax 执行顺序
- GO语言之urfave/cli命令行解析
- linux driver ------ platform模型,通过杂项设备(主设备号是10)注册设备节点
- DDD领域模型数据访问之对象(十一)
- SP1812 LCS2 - Longest Common Substring II
- python 安装opencv 安装pycocotools
- Gym - 101028I March Rain 二分
热门文章
- SSMP一次请求数据处理过程分析
- weixin://connectToFreeWifi/协议如何跳转到微信客户端打开在wifi指定任意网页?
- css遮罩蒙版效果 分栏效果
- 初学Python(二)
- NGUI之实现连连看小游戏
- 论文阅读(XiangBai——【PAMI2018】ASTER_An Attentional Scene Text Recognizer with Flexible Rectification )
- python:sys.exit() os._exit() exit() quit()
- Log4j 2使用教程一【入门】
- CAN自收自发问题小结
- drf 单表