jQuery删除DOM节点

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
</head>
<body style="margin:150px;">
<div id="div001">div001</div>
<div id="div002">div002</div>
<div id="div003">div003</div>
<div>
<button id="btn001">click me to use remove()</button>
<button id="btn002">click me to use remove(selector)</button>
<button id="btn003">click me to use detach()</button>
<button id="btn004">click me to use detach(selector),这个有问题</button>
<button id="btn005">click me to use empty()</button>
<button id="btn006">click me to use empty(selector),这个会全清空</button>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="b/js/bootstrap.js"></script>
<script type="text/javascript" src="js/index026.js"></script>
</body>
</html>
$(function() {
$('#btn001').click(btn001Click);
$('#btn002').click(btn002Click);
$('#btn003').click(btn003Click);
$('#btn004').click(btn004Click);
$('#btn005').click(btn005Click);
$('#btn006').click(btn006Click);
initDiv();
});
function btn001Click() {
// 得到的对象是jQuery对象;
var removed = $('#div001').remove();
console.log(removed);
// remove之后会把事件清除;虽然还可以继续加添回来;
$('#div003').after(removed);
}
function btn002Click() {
// 这样可以使用选择器;这样有问题的,在console中看到removed是一堆的;
// 但是结果好像是正确的;
var removed = $('div').remove('#div002');
// 这里面隐含了一个遍历,把div002after到了每一个找到的div层后面;
$('div').after(removed);
}
function btn003Click() {
var detached = $('#div001').detach();
$('#div003').after(detached);
}
function btn004Click() {
// 这样选择好像是有问题的,在console中看到的detached是一堆的;
var detached = $('div').detach('#div002');
// 这样好像是有问题的;
$('#div003').after(detached);
}
function btn005Click() {
$('#div001').empty();
}
function btn006Click() {
// 不接受这样的参数;
$('div').empty('#div001');
}
function initDiv() {
$('div').click(function() {
// 获取点击事件的DOM对象: arguments[0].target.id
console.log('%c' + arguments[0].target.id + ' click', 'font-size:16px;color:red');
});
}

jQuery删除DOM节点的更多相关文章

  1. angular.js ng-repeat动态插入删除dom节点

    既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...

  2. angular.js 动态插入删除dom节点

    angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...

  3. 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  4. jQuery克隆DOM节点

    jQuery克隆DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  5. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  6. js删除dom节点时候索引出错问题

    我们知道删除一个dom节点的时候索引就会发生了改变,甚至是错误,就算jq的ecah也无能为力,所以我们只能自己写个功能了 直接上代码把,不多说 <!DOCTYPE html> <ht ...

  7. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  8. javascript与jquery删除元素节点

    今天工作的时候遇到一个删除的问题,研究了下发现是没有很好的区分js和jquery的删除方法,在此澄清一下 工作的代码如下 // 删除图片 $("#js_takePhotoWrap" ...

  9. jQuery 获取DOM节点的两种方式

    jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 如: $("#id&qu ...

随机推荐

  1. 原生 JS Ajax,GET和POST 请求实例代码

    javascript/js的ajax的GET请求代码如下所示: <script type="text/javascript"> /* 创建 XMLHttpRequest ...

  2. PS2鼠标+LCD12864实验——终于OK 了

    抱着“不气馁.不放弃.誓不罢休.搞不定你我还能搞其他玩意吗”的心态,调试许久的PS2鼠标实验,终于在今天被我搞定了.发几张图显摆一下,嘿嘿...    左键按下+鼠标移动 右键按下+鼠标移动  中键按 ...

  3. webapp之路--理解viewport的使用

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...

  4. localStorage、sessionStorages 使用

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  5. mtp

    http://www.android.gs/mount-google-nexus-4-mtp-sd-card-on-ubuntu-and-other-linux-computers/ https:// ...

  6. Trim(',')的作用去除最有一个','

    public bool XMLDataImport()        { List<string> sqllist = new List<string>();          ...

  7. Codeforces #377 Div2

    打得还不错的一场CF,题目质量也很高,今后还要继续努力 A题: 题意:给定一个数k,让其乘一个最小的数,使乘得以后的数要不被10整除,要不减去r以后被10整除,求这个最小的数 #include < ...

  8. [转帖]完美解决NVIDIA最新显卡驱动无法安装。(修改教程篇,各机型都可以)

    http://blog.sina.com.cn/s/blog_53e2b55e0100lyx2.html ————————————————————————————————————     前段时间,有 ...

  9. Bar Chart of Frequency of modals in different sections of the Brown Corpus

    Natural Language Processing with Python Chapter 4.8 colors = 'rgbcmyk' # red, green, blue, cyan, mag ...

  10. kafka第四篇--快速入门(如何使用kafka)

    Quick Start Step 1: Download the code Download the 0.8 release. > tar xzf kafka-<VERSION>.t ...