1.remove()

remove()方法移除被选元素，包括所有的文本和子节点。

语法：$(selector).remove()

当我们想将元素自身移除时我们用 .remove()，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。

例子1：（移除数据）

  1. <div class="header"></div>
  2. <div id="middle">你好</div>
  3. <div id="foot"></div>
  4. <input type="button" value="删除">
  5. <script>
  6. $("input").on('click', function() {
  7.         //删除整个 id=middle的节点
  8.         $("#middle").remove();
  9. })
  10. </script>

初始

点击删除按钮之后

可以看到使用remove方法删除之后，整个 id=middle的节点包括里面的数据都没有了

例子2（子节点的数据也会被移除）

  1. <div class="header">hello</div>
  2. <div id="middle">你好</div>
  3. <div id="foot">早上好</div>
  4. <input type="button" value="删除">
  5. <script>
  6. $("input").on('click', function() {
  7.         //删除所有元素为div的节点
  8.         $("div").remove();
  9. })
  10. </script>

初始

点击删除按钮之后

可以看到使用remove方法删除之后，整个 id=middle的节点包括里面的数据都没有，该节点所包含的所有后代节点和后代节点的数据都没有了

例子3(将所有符合的删除)

  1. <div class="header">hello</div>
  2. <div id="middle">你好</div>
  3. <div id="foot">早上好</div>
  4. <input type="button" value="删除">
  5. <script>
  6. $("input").on('click', function() {
  7.         //删除所有元素为div的节点
  8.         $("div").remove();
  9. })
  10. </script>

初始

点击删除按钮之后

可以看到使用remove方法删除之后，所有元素是div的节点包括里面的数据和没了

例子4(传递参数来选择性地删除元素)

remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。

例子：

  1. <div id="header">hello</div>
  2. <div id="middle">你好</div>
  3. <div id="foot">早上好</div>
  4. <input type="button" value="删除">
  5. <script src="jquery-1.11.3.min.js"></script>
  6. <script>
  7. $("input").on('click', function() {
  8.         //删除所有元素为div的节点
  9.        $("div").remove("div[id!=foot]");
  10. })
  11. </script>

点击前



点击删除按钮之后

例子：

  1. <div id="header">hello</div>
  2. <div id="middle">你好</div>
  3. <div id="foot">早上好</div>
  4. <input type="button" value="删除">
  5. <script>
  6. $("input").on('click', function() {
  7.         //删除所有元素为div的节点
  8.        $("div").filter("#foot").remove();
  9. })
  10. </script>

点击前

点击删除按钮之后

之前有讲过：

（1）不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

虽然在前面已经把元素从文档中被移除但其实将其从jQuery对象中移除，因此我们还可以使用该jQuery对象，将它再次放入文档中

简而言之，就是被删除的元素是可以被找回来的。

当某个节点用remove()方法删除时。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。下面的JQuery代码说明元素用remove()方法删除后，还是可以继续使用的。

例子1

  1. <div class="header"></div>
  2. <div id="middle">你好</div>
  3. <div id="foot"></div>
  4. <input type="button" value="删除">
  5. <script>
  6. $("input").on('click', function() {
  7. 	var $li =$("#middle").remove();
  8. 	$li.appendTo("body");
  9. })
  10. </script>

初始

删除再追回代码

例子2：

  1. <div class="header">hello</div>
  2. <div id="middle">
  3. 	你好
  4. </div>
  5. <div id="foot"></div>
  6. <input type="button" value="删除">
  7. <script>
  8. $("input").on('click', function() {
  9. 	var $li =$("#middle").remove();
  10. 	$li.appendTo(".header");
  11. })
  12. </script>

初始

删除再追回代码

例子3

  1. <div id="header">hello</div>
  2. <div id="middle">
  3. 	你好
  4. </div>
  5. <div id="foot"></div>
  6. <input type="button" value="删除">
  7. <script>
  8. $("input").on('click', function() {
  9. 	var $li =$("#middle").remove();
  10. 	$li.appendTo("#foot");
  11. })
  12. </script>

初始

删除再追回代码

如果说只是想把一个元素移动到另一个位置，那我们完全不需要写这么复杂，

可以直接使用appendTo()方法的特性来简化以上代码，JQuery代码如下：

var $li =$("#middle").remove(); $li.appendTo("#foot");

写成$("#middle").appendTo("#foot");

这就是移动操作，这些在之前的文章jquery实现动态添加html代码中有讲过。

相似的还有prependTo(),prepend (),append (),brefore(),insertBefore(),insertAter(),after()

（2）这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。

例子1：（元素的属性指定的事件不会被删除）

  1. <style>
  2. 	.box{
  3. 		width:500px;
  4. 		height:500px;
  5. 		background:#eee;
  6. 		color:#fff;
  7. 		border:1px solid #eee;
  8. 	}
  9. 	.box_inner{
  10. 		width:200px;
  11. 		height:200px;
  12. 		margin:100px;
  13. 		background:green;
  14. 		color:#fff;
  15. 	}
  16. 	.box_inner:hover{
  17. 		background:red;
  18. 		color:green;
  19. 	}
  20. </style>
  21. </head>
  22. <body>
  23. <div id="header">hello</div>
  24. <div id="middle">
  25. 	<div class="box">
  26. 	<div class="box_inner">
  27. 		我还在
  28. 	</div>
  29.         </div>
  30. </div>
  31. <div id="foot">早上好</div>
  32. <input type="button" value="删除">
  33. <script>
  34. $("input").on('click', function() {
  35. 	var $li =$("#middle").remove();
  36. 	$li.appendTo("#foot");
  37. })
  38. </script>

解析：

图中的绿色部分有个hover变色效果，我们点击按钮删除代码有加上发现仍有hover变色效果

例子2：（JQuery动态绑定的事件会被删除）

  1. <style>
  2. 	.box{
  3. 		width:500px;
  4. 		height:500px;
  5. 		background:#eee;
  6. 		color:#fff;
  7. 		border:1px solid #eee;
  8. 	}
  9. 	.box_inner{
  10. 		width:200px;
  11. 		height:200px;
  12. 		margin:100px;
  13. 		background:green;
  14. 		color:#fff;
  15. 	}
  16. </style>
  17. </head>
  18. <body>
  19. <div id="header">hello</div>
  20. <div id="middle">
  21. 	<div class="box">
  22. 		<div class="box_inner">
  23. 			我还在
  24. 		</div>
  25. 	</div>
  26. </div>
  27. <div id="foot">早上好</div>
  28. <input type="button" value="删除">
  29. <script>
  30. $("input").on('click', function() {
  31. 	var $li =$("#middle").remove();
  32. 	$li.appendTo("#foot");
  33. })
  34. $(".box_inner").hover(
  35. 	function(){
  36. 		$(this).css({"background":"red","color":"green","cursor":"pointer"});
  37. 	},
  38. 	function(){
  39. 		$(this).css({"background":"green","color":"#fff"});
  40. 	})
  41. </script>

解析：



图中的绿色部分有个hover变色效果，我们点击按钮删除代码又追回元素发现hover效果已经没有效果。

**延伸：

如果是移动操作的话，JQuery动态绑定的事件是不被删除的。

**

例子3：（直接在元素节点中绑定的事件不会被删除）

  1. <style>
  2. 	.box{
  3. 		width:500px;
  4. 		height:500px;
  5. 		background:#eee;
  6. 		color:#fff;
  7. 		border:1px solid #eee;
  8. 	}
  9. 	.box_inner{
  10. 		width:200px;
  11. 		height:200px;
  12. 		margin:100px;
  13. 		background:green;
  14. 		color:#fff;
  15. 	}
  16. </style>
  17. </head>
  18. <body>
  19. <div id="header">hello</div>
  20. <div id="middle">
  21. 	<div class="box">
  22. 		<div class="box_inner" onmouseover="over(this)" onmouseout="out(this);">
  23. 			我还在
  24. 		</div>
  25. 	</div>
  26. </div>
  27. <div id="foot">早上好</div>
  28. <input type="button" value="删除"  />
  29. <script>
  30. $("input").on('click', function() {
  31. 	var $li =$("#middle").remove();
  32. 	$li.appendTo("#foot");
  33. })
  34. function over(obj) {
  35. 	$(obj).css({"background":"red","color":"green","cursor":"pointer"});
  36. };
  37. function out(obj) {
  38. 	$(obj).css({"background":"green","color":"#fff"});
  39. };
  40. </script>

解析：

图中的绿色部分有个hover变色效果，我们点击按钮删除代码有加上发现仍有hover变色效果

例子4(元素关联的data值会被删除)

  1. <div id="header">hello</div>
  2. <div id="middle">
  3. 	<div class="box">
  4. 		<div class="box_inner">
  5. 			我还在
  6. 		</div>
  7. 	</div>
  8. </div>
  9. <div id="foot">早上好</div>
  10. <input type="button" value="删除">
  11. <script>
  12. var $div2=$(".box_inner");
  13. $div2.data("value", 1);
  14. console.log($(".box_inner").data("value"));
  15. $("input").on('click', function() {
  16. 	var $li =$("#middle").remove();
  17. 	$li.appendTo("#foot");
  18. 	console.log($(".box_inner").data("value"));
  19. })
  20. </script>

解析：第二个undefined是按钮点击后打印的附加数据的值，这也就是删除后再追回元素的jquery的附加数据是undefined，但是初始值是1，可以得知：jquery的相关数据是被删掉了。

2.empty()

描述: 从DOM中移除集合中匹配元素的所有子节点。

语法：.empty()

**这个方法不接受任何参数

这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。

但是需要注意的是：

他不会删除自身节点

**

例子1：

  1. <div id="header"></div>
  2. <div id="middle">
  3. 	<div class="box">
  4. 		<div class="box_inner">
  5. 			我还在
  6. 		</div>
  7. 	</div>
  8. </div>
  9. <div id="foot"></div>
  10. <input type="button" value="删除"  />
  11. <script>
  12. $("input").on('click', function() {
  13. 	$("#middle").empty();
  14. })
  15. </script>

初始



删除后



empty()函数与html()函数具有以下等价代码：

  1. $("p").empty( );
  3. // 等价于
  5. $("p").html("");

例子2：（返回的对象不包括删除的子元素，只保留节点。）

  1. <div id="header"></div>
  2. <div id="middle">
  3. 	<div class="box">
  4. 		<div class="box_inner">
  5. 			我还在
  6. 		</div>
  7. 	</div>
  8. </div>
  9. <div id="foot"></div>
  10. <input type="button" value="删除"  />
  11. <script>
  12. $("input").on('click', function() {
  13. 	var $li =$("#middle").empty();
  14. 	$li.appendTo("#foot");  
  16. })
  17. </script>



删除再追回代码

例子3（empty()表示移除的是选择器的所有子元素，返回的是选择器选中的元素。在如何处理被删除元素的data值和事件处理函数时，其表现和detach()一致，会保留删除元素的data值和事件处理函数。）

（JQuery动态绑定的事件不会被删除）

  1. <style>
  2. 	#middle{
  3. 		width:200px;
  4. 		height:200px;
  5. 		margin:100px;
  6. 		background:green;
  7. 		color:#fff;
  8. 	}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="header"></div>
  13. <div id="middle">
  14. 	我还在
  15. </div>
  16. <div id="foot"></div>
  17. <input type="button" value="删除"  />
  18. <script src="jquery-1.11.3.min.js"></script>
  19. <script>
  20. $("input").on('click', function() {
  21. 	var $li =$("#middle").empty();
  22. 	$li.appendTo("#foot");
  23. })
  24. $("#middle").hover(
  25. 	function(){
  26. 		$(this).css({"background":"red","color":"green","cursor":"pointer"});
  27. 	},
  28. 	function(){
  29. 		$(this).css({"background":"green","color":"#fff"});
  30. 	})
  31. </script>

例子4（直接在元素节点中绑定的事件不会被删除）

  1. <style>
  2. 	#middle{
  3. 		width:200px;
  4. 		height:200px;
  5. 		margin:100px;
  6. 		background:green;
  7. 		color:#fff;
  8. 	}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="header"></div>
  13. <div id="middle"  onmouseover="over(this)" onmouseout="out(this);">
  14. 	我还在
  15. </div>
  16. <div id="foot"></div>
  17. <input type="button" value="删除"  />
  18. <script>
  19. $("input").on('click', function() {
  20. 	var $li =$("#middle").empty();
  21. 	$li.appendTo("#foot");
  22. })
  23. function over(obj) {
  24. 	$(obj).css({"background":"red","color":"green","cursor":"pointer"});
  25. };
  26. function out(obj) {
  27. 	$(obj).css({"background":"green","color":"#fff"});
  28. };
  29. </script>

例子5（会保留删除元素的data值）

  1. <style>
  2. 	#middle{
  3. 		width:200px;
  4. 		height:200px;
  5. 		margin:100px;
  6. 		background:green;
  7. 		color:#fff;
  8. 	}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="header">hello</div>
  13. <div id="middle">
  14. 	<div class="box">
  15. 		<div class="box_inner">
  16. 			我还在
  17. 		</div>
  18. 	</div>
  19. </div>
  20. <div id="foot">早上好</div>
  21. <input type="button" value="删除">
  22. <script>
  23. var $div2=$("#middle");
  24. $div2.data("value", 1);
  25. console.log($("#middle").data("value"));
  26. $("input").on('click', function() {
  27. 	var $li =$("#middle").empty(); ;
  28. 	$li.appendTo("#foot");
  29. 	console.log($("#middle").data("value"));
  30. })
  31. </script>



第二个1是按钮点击后打印的附加数据的值，这也就是删除后再追回元素的jquery的附加数据是1，但是初始值是1，可以得知：jquery的相关数据是没有被删除。

3. detach()

定义和用法

detach() 方法移除被选元素，包括所有文本和子节点。

这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。

detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据

语法：$(selector).detach()

例子1（删除子节点，所有文本和本身节点）



删除后

例子2(传递参数来选择性地删除元素)

detach()方法也可接受一个参数（选择器表达式），允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。

例子1：

  1. <div id="header">hello</div>
  2. <div id="middle">你好</div>
  3. <div id="foot">早上好</div>
  4. <input type="button" value="删除">
  5. <script type="text/javascript">
  6. $("input").on('click', function() {
  7.     $("div").detach("div[id!=foot]");
  8. })
  9. </script>

点击前

删除后

例子3（元素追回）

不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

虽然在前面已经把元素从文档中被移除

但其实将其从jQuery对象中移除，因此我们还可以使用该jQuery对象，将它再次放入文档中

简而言之，就是被删除的元素是可以被找回来的。

例子：

  1. <div id="header"></div>
  2. <div id="middle">
  3. 	<div>
  4. 	你好
  5. 	</div>
  6. </div>
  7. <div id="foot"></div>
  8. <input type="button" value="删除">
  9. <script>
  10. $("input").on('click', function() {
  11.     var $li=$("#middle").detach();
  12. 	$li.appendTo("#foot");
  13. })
  14. </script>

初始



删除后找回

例子（JQuery动态绑定的事件不会被删除）：

  1. <style>
  2. 	#middle{
  3. 		width:200px;
  4. 		height:200px;
  5. 		margin:100px;
  6. 		background:green;
  7. 		color:#fff;
  8. 	}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="header"></div>
  13. <div id="middle">
  14. 	我还在
  15. </div>
  16. <div id="foot"></div>
  17. <input type="button" value="删除"  />
  18. <script>
  19. $("input").on('click', function() {
  20. 	var $li =$("#middle").detach();
  21. 	$li.appendTo("#foot");  })
  22. $("#middle").hover(
  23. 	function(){
  24. 		$(this).css({"background":"red","color":"green","cursor":"pointer"});
  25. 	},
  26. 	function(){
  27. 		$(this).css({"background":"green","color":"#fff"});
  28. 	})
  29. </script>

例子（直接在元素节点中绑定的事件不会被删除）

  1. <style>
  2. 	#middle{
  3. 		width:200px;
  4. 		height:200px;
  5. 		margin:100px;
  6. 		background:green;
  7. 		color:#fff;
  8. 	}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="header"></div>
  13. <div id="middle"  onmouseover="over(this)" onmouseout="out(this);">
  14. 	我还在
  15. </div>
  16. <div id="foot"></div>
  17. <input type="button" value="删除"  />
  18. <script>
  19. $("input").on('click', function() {
  20. 	var $li =$("#middle").detach();
  21. 	$li.appendTo("#foot");
  22. })
  23. function over(obj) {
  24. 	$(obj).css({"background":"red","color":"green","cursor":"pointer"});
  25. };
  26. function out(obj) {
  27. 	$(obj).css({"background":"green","color":"#fff"});
  28. };
  29. </script>

例子（会保留删除元素的data值）

  1. <style>
  2. 	#middle{
  3. 		width:200px;
  4. 		height:200px;
  5. 		margin:100px;
  6. 		background:green;
  7. 		color:#fff;
  8. 	}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="header">hello</div>
  13. <div id="middle">
  14. 	<div class="box">
  15. 		<div class="box_inner">
  16. 			我还在
  17. 		</div>
  18. 	</div>
  19. </div>
  20. <div id="foot">早上好</div>
  21. <input type="button" value="删除">
  22. <script>
  23. var $div2=$("#middle");
  24. $div2.data("value", 1);
  25. console.log($("#middle").data("value"));
  26. $("input").on('click', function() {
  27. 	var $li =$("#middle").detach();
  28. 	$li.appendTo("#foot");
  29. 	console.log($("#middle").data("value"));
  30. })
  31. </script>



第二个1是按钮点击后打印的附加数据的值，这也就是删除后再追回元素的jquery的附加数据是1，但是初始值是1，可以得知：jquery的相关数据是没有被删除。

4.三者的对比

最后，我们看下这三者的对比图

本文为原创，如需转载请注明转载地址，谢谢合作！

本文地址：http://www.cnblogs.com/wanghuih/p/6143577.html

jquery动态删除html代码的更多相关文章

  1. jquery动态生成html代码绑定事件

    今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...

  2. jquery 动态添加的代码不能触发绑定事件

    今天发现jQuery对动态添加的元素不触发事件,比如blur.click事件等 参考文章证明了我的结论,并给出了原因及解决方案 原因:程序找不到动态添加的节点. 解决方案:在绑定父元素后的子元素 $( ...

  3. jquery动态删除、复制、包裹DOM节点

    1.remove()方法 移除满足条件的元素 <html> <head> <meta http-equiv="Content-Type" conten ...

  4. jquery动态生成html代码 怎么 获取id 或 class

    动态创建的节点要用live方法加事件,语句要改为: $(“.del").live("click", function() {  alert("获取到了" ...

  5. Jquery动态在td中添加checkbox

    如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...

  6. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  7. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  8. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  9. jquery 动态增加table行，动态删除table行

    在html中我们大量的用到了局部刷新,局部刷新就是使用js来动态的修改html局部的数据.下面来介绍下使用jquery来动态的增加table的行,当然这种方式可以适用到任何的html组件中去. < ...

随机推荐

  1. 多个DLL合并成一个DLL

    多个DLL合并成一个DLL,把DLL合并到Exe中的解决方案 1:) 下载 http://download.microsoft.com/download/1/3/4/1347C99E-9DFB-425 ...

  2. 【小错误】SP2-0618: Cannot find the Session Identifier. Check PLUSTRACE role is enabled

    1.今天在scott用户下执行语句跟踪时报了如下错误: SCOTT@ORA11GR2>set autotrace on SP2: Cannot find the Session Identifi ...

  3. LR12.53—第2课：准备脚本重播

    第2课:准备脚本重播 创建Vuser脚本后,可以通过从VuGen中运行它验证它.有时重播将失败,即使同样的动作在录制过程中取得了成功. 许多应用程序使用,每次使用应用​​程序时更改动态值.例如,某些服 ...

  4. hibernate 左链接查询

    select pro from Provide as pro left join pro.labels as la left join pro.city as c where 1=1

  5. How to acquire an Android phone with locked bootloader?

    As we know that some devices come with locked bootloaders like Sony, HUAWEI, hTC...If you try to unl ...

  6. 解决linux yum无法安装mysql

    yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1. 下载mysql的repo源 wget http://repo.mysql.com/mysql-com ...

  7. Ninject之旅之三：Ninject对象生命周期

    摘要 DI容器的一个责任是管理他创建的对象的生命周期.他应该决定什么时候创建一个给定类型的对象,什么时候使用已经存在的对象.他还需要在对象不需要的时候处理对象.Ninject在不同的情况下管理对象的生 ...

  8. IIS7 IIS8 中多个版本php共存的方法

    原文地址: https://blog.cozof.com/pieces/54.shtml 最近又重回.net,用回IIS.然后用到某个php开源项目,需要低版本的php,之前装的一个php5.5不能用 ...

  9. 基于 EntityFramework 的数据库主从读写分离

    现在刚开始来研究EntityFramwork,起初是在vs2012中通过工具来创建EF ,但是对我这种不熟悉菜鸟来说 有很多业务用EF做出来还是有点难度的,今天来手动搭建一个EF框架,大神勿喷

  10. 微服务实战系列--Nginx官网发布（转）

    这是Nginx官网写的一个系列,共七篇文章,如下 Introduction to Microservices (this article) Building Microservices: Using ...