<!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 添加和删除元素的更多相关文章

  1. Arrays.asList () 不可添加或删除元素的原因

    Java中奖数组转换为List<T>容器有一个很方便的方法 Arrays.asList(T ... a),我通过此方法给容器进行了赋值操作,接着对其进行 添加元素,却发现会抛出一个(jav ...

  2. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  3. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

  4. javascript数组在指定位置添加和删除元素

    在JavaScript中,Array对象提供了一个强大的splice()方法,利用这个方法可以达到在数组的指定位置添加和删除元素的目的. 指定位置删除元素 要在指定位置删除元素,可以使用splice( ...

  5. 顺序表添加与删除元素以及 php实现顺序表实例

    对顺序表的操作,添加与删除元素. 增加元素 如下图所示  对顺序列表 Li [1328,693,2529,254]  添加一个元素 111 ,有三种方式: a)尾部端插入元素,时间复杂度O(1);  ...

  6. 4. 理解Update、Enter、Exit 与 添加、删除元素

    理解Update.Enter.Exit 与 添加.删除元素 在使用data()绑定数据时,例如:现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个<p>绑定,但是,现 ...

  7. JQUERY添加、删除元素、eq()方法；

    一.jQuery - 添加元素 1.append() - 在被选元素内部的结尾插入指定内容 2.prepend() - 在被选元素内部的开头插入指定内容 3.after() - 在被选元素之后插入内容 ...

  8. jQuery_添加与删除元素

    一.jQuery添加元素(通过 jQuery,可以很容易地添加新元素/内容.) 1.添加新的 HTML 内容,用于添加新内容的四个 jQuery 方法(都能解析HTML标签): append() - ...

  9. （转载）php数组添加、删除元素的方法

    (转载)http://www.phpgs.com/html/php/phpjichu/20120130440.html 带来一篇php 数组 添加元素.删除元素的方法的文章,有需要的php学习者参考下 ...

随机推荐

  1. python smtp 发邮件 添加附件

    # -*- coding:utf-8 -*- # __author__ = 'justing' import os import smtplib from email.mime.multipart i ...

  2. MailKit使用IMAP读取邮件找不到附件Attachments为空的解决方法

    今天发现有些邮件无法读取Attachments,邮件明明有附件,但使用Mailkit读取时,Attachments为空,我用的IMAP协议读取收件箱里的邮件,处理完后移动已删除: foreach (v ...

  3. 00JAVA语法基础_动手动脑

    1.仔细阅读示例: EnumTest.java,运行它,分析运行结果? 枚举类型的使用是借助ENUM这样一个类,这个类是JAVA枚举类型的公共基本类.枚举目的就是要让某个变量的取值只能为若干固定值中的 ...

  4. 蓝桥杯近3年决赛题之3（17年b组）

    做的时候对了2个小题,一个大题可能会拿点分数. 1. 标题:36进制 对于16进制,我们使用字母A-F来表示10及以上的数字.如法炮制,一直用到字母Z,就可以表示36进制. 36进制中,A表示10,Z ...

  5. linux 下的OpenGL的安装配置

    https://blog.csdn.net/qq_38228254/article/details/78521155 本人亲测有效

  6. c# 中HttpClient访问Https网站

    c# 中HttpClient访问Https网站,加入如下代码: handler = new HttpClientHandler() ;handler.AllowAutoRedirect = true; ...

  7. Django框架详细介绍---Admin后台管理

    1.Admin组件使用 Django内集成了web管理工具,Django在启动过程中会执行setting.py文件,初始化Django内置组件.注册APP.添加环境变量等 # Application ...

  8. spring boot + vue + element-ui全栈开发入门——spring boot后端开发

    前言 本文讲解作为后端的spring boot项目开发流程,如果您还不会配置spring boot环境,就请点击<玩转spring boot——快速开始>,如果您对spring boot还 ...

  9. Dubbo 泛化调用的参数解析问题及一个强大的参数解析工具 PojoUtils

    排查了3个多小时,因为一个简单的错误,发现一个强大的参数解析工具,记录一下. 背景 Nodejs 通过 tether 调用 Java Dubbo 服务.请求类的某个参数对象 EsCondition 有 ...

  10. Python 上下文管理协议中的__enter__和__exit__基本理解

    所谓上下文管理协议,就是咱们打开文件时常用的一种方法:with __enter__(self):当with开始运行的时候触发此方法的运行 __exit__(self, exc_type, exc_va ...