<!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. vue axios中文文档详解

    英文文档:https://github.com/axios/axios 参考:https://www.jb51.net/article/123485.htm

  2. Scala面向对象详解

    Scala的包(作用域) package com.jh.scala 等同于 package jh \n package scala 等同于 package com.jh{ package scala ...

  3. EF性能检测工具MiniProfilerEF6的使用

    一.在VS项目中分别安装包MiniProfiler.MiniProfiler.EF6.MiniProfiler.MVC4 二.在Global.asax文件的Application_BeginReque ...

  4. qt 画多边形（实现鼠标拖动节点）

    ---恢复内容开始--- 2018-01-06 这个小例子实现了移动鼠标,鼠标的坐标信息跟随鼠标移动,多边形的实现,鼠标点击可以拖动多边形点的位置,(其中有个问题?我在QMainWindow下,用mo ...

  5. 安装Oracle Grid的过程中用到的几个小技巧

    1.利用文件来模拟块设备 在grid的安装教程中有一步是 provision the disk devices for use with ASM Filter Driver.但是如果我们没有多个磁盘怎 ...

  6. [BZ4923][Lydsy1706月赛]K小值查询

    K小值查询 题面 维护一个长度为n的正整数序列a_1,a_2,...,a_n,支持以下两种操作: 1 k,将序列a从小到大排序,输出a_k的值. 2 k,将所有严格大于k的数a_i减去k. Input ...

  7. DotNetty网络通信框架学习之初识Netty

    p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...

  8. 可能是最简单的把C++Lib包装成C#可用dll的方法

    (想直接看结果的直接翻到最后) 之前对C++接触不多,最近工作需要,第三方给了一个C++的lib库,我们需要把它封装一下在C#中调用.对方要是直接给Dll就省事了... 研究了一下,基本有三个方向: ...

  9. Oracle创建表空间、表、一级用户授权

    ---恢复内容开始--- 1. 安装: 百度一下你就知道 2. sqlplus登录/sqlplus命令登录 在安装Oracle时,你需要记住设置的“全局数据库名”(默认为orcl) 和 口令,在以两种 ...

  10. cshtml razor

    禁止转换字符 @(Html.Raw(@item.conent)) 三目运算 @(ViewBag.submitType==1?"blue":"")