JQurey 添加和删除元素
<!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 按钮
JQurey 添加和删除元素的更多相关文章
- Arrays.asList () 不可添加或删除元素的原因
Java中奖数组转换为List<T>容器有一个很方便的方法 Arrays.asList(T ... a),我通过此方法给容器进行了赋值操作,接着对其进行 添加元素,却发现会抛出一个(jav ...
- JavaScript向select下拉框中添加和删除元素
JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...
- js进阶 9-11 select选项框如何动态添加和删除元素
js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...
- javascript数组在指定位置添加和删除元素
在JavaScript中,Array对象提供了一个强大的splice()方法,利用这个方法可以达到在数组的指定位置添加和删除元素的目的. 指定位置删除元素 要在指定位置删除元素,可以使用splice( ...
- 顺序表添加与删除元素以及 php实现顺序表实例
对顺序表的操作,添加与删除元素. 增加元素 如下图所示 对顺序列表 Li [1328,693,2529,254] 添加一个元素 111 ,有三种方式: a)尾部端插入元素,时间复杂度O(1); ...
- 4. 理解Update、Enter、Exit 与 添加、删除元素
理解Update.Enter.Exit 与 添加.删除元素 在使用data()绑定数据时,例如:现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个<p>绑定,但是,现 ...
- JQUERY添加、删除元素、eq()方法；
一.jQuery - 添加元素 1.append() - 在被选元素内部的结尾插入指定内容 2.prepend() - 在被选元素内部的开头插入指定内容 3.after() - 在被选元素之后插入内容 ...
- jQuery_添加与删除元素
一.jQuery添加元素(通过 jQuery,可以很容易地添加新元素/内容.) 1.添加新的 HTML 内容,用于添加新内容的四个 jQuery 方法(都能解析HTML标签): append() - ...
- （转载）php数组添加、删除元素的方法
(转载)http://www.phpgs.com/html/php/phpjichu/20120130440.html 带来一篇php 数组 添加元素.删除元素的方法的文章,有需要的php学习者参考下 ...
随机推荐
- 6个项目带你全面掌握Laravel框架
Laravel框架简介: Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来,帮你构建一个完美的网络APP,而且每行 ...
- 2018-2019-2 网络对抗技术 20165321 Exp6 信息搜集与漏洞扫描
1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 百度查找IP地址: 查了一下kali的IP地址 https://fofa.so/的使用: 查询了一 ...
- git删除和提交
//删除git分支git branch -D BranchNamegit branch -r -D origin/BranchNamegit push origin -d BranchName//提交 ...
- cocos creator 无法打开项目 dock栏只显示图标问题解决方法
1.打开项目 2.找到 library和local文件夹 3.清空这两个文件夹的数据 4.问题已解决 原因: 以前生成的旧数据会和新数据发生冲突,把生成的旧数据清理掉就OK了.
- python-爬虫(3)---lxml匹配css
百度首页 部分代码 <div class="s_tab_inner"> <b>网页</b> <a href="//www.ba ...
- 关于html/css的一些小技巧之hack掉"margin-top"层叠问题
身为小前端菜鸟一枚,忽然听到这样一则传言~~ 心情久久不能平复,想到前几日,开通了博客君,特来此寻找存在feeling~ 旨在造福普罗大众(更多前端小菜鸟) 话不多说, 我们步入正题,今天来给大家分享 ...
- vue生命周期钩子函数
<template> <div> <h2>this is from C.vue</h2> </div> </template> ...
- ORA-01589解决
错误展现如下: sqlplus /nolog SQL> conne /as sysdbaConnected.SQL> shutdown abortORACLE instance shut ...
- redis（一主两从三哨兵模式搭建）记录
转自:http://www.cnblogs.com/fly-piglet/p/9836314.html 目的: 让看看这篇文章的的人能够知道:软件架构.软件的安装.配置.基本运维的操作.高可用测试.也 ...
- ROS中使用Kinect摄像头和usb摄像头
1.安装的一些包 kinect用的freenect: $ sudo apt-get install ros-indigo-freenect-launch $ sudo apt-get install ...