在jQuery中提供了remove()和detach()方法,用于删除元素节点;empty()方法用于清空当前元素中的内容,而元素的标签部分仍被保留。
1. remove()方法: remove()方法用于删除所匹配的元素,包括该元素的文本节点和子节点。该方法返回一个jQuery对象或数组,其中包含被删除元素的基本内容,但不包含所绑定的事件和附加数据等信息。remove()方法的语法格式如下:
var jQueryObject = $(selector).remove(); //$(selector)表示需要被删除的元素2. detach()方法: detach()方法用于删除所匹配的元素,包括该元素的文本节点和子节点。该方法将返回一个jQuery对象或数组,其中包含被删除元素的基本内容、绑定事件以及附加数据等信息。detach()方法的语法格式如下:
var jQueryObject = $(selector).detach(); //$(selector)表示需要被删除的元素3. empty()方法: empty()方法用于清空元素的内容(包括所有文本和子节点),但不删除该元素,其语法格式如下:
$(selector).empty() //$(selector)表示要被清空的元素示例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>删除节点-jQuery</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> <style type="text/css"> img{height:250px;width:240px;} table{border:0px; text-align:center;} table td{width:240px;} </style> </head> <body> <table border="1"> <tr> <td id="firstCell"><img src="images/clothe1.jpg" /></td> <td id="secondCell"><img src="images/clothe2.jpg" /></td> <td id="thirdCell"><img src="images/clothe3.jpg" /></td> </tr> <tr> <td> <input type="button" value="remove" id="removeBtn"/> <input type="button" value="recovery" id="recoveryRemoveBtn"/> </td> <td> <input type="button" value="detach" id="detachBtn"/> <input type="button" value="recovery" id="recoveryDetachBtn"/> </td> <td> <input type="button" value="empty" id="emptyBtn"/> </td> </tr> </table> <script type="text/javascript"> $(function (e) { var firstImage; var secondImage; //为每幅图像附加数据 $("img:first").data("msg", "皮草大卖场-漫步时尚广场"); $("img:eq(1)").data("msg", "电子产品专卖-漫步时尚广场"); $("img:last").data("msg", "西装个人定制-漫步时尚广场"); //为图像绑定click事件 $("img").click(function(){ alert($(this).data("msg")); }); //removeBtn按钮绑定click事件 $("#removeBtn").click(function(){ if(($("#firstCell img").length)>0){ firstImage=$("#firstCell img").remove(); } }); //恢复removeBtn按钮删除的图像 $("#recoveryRemoveBtn").click(function(){ $("#firstCell").append(firstImage); }); //detachBtn按钮绑定click事件 $("#detachBtn").click(function(){ if(($("#secondCell img").length)>0){ secondImage=$("#secondCell img").detach(); } }); //恢复detachBtn按钮删除的图像 $("#recoveryDetachBtn").click(function(){ $("#secondCell").append(secondImage); }); //emptyBtn按钮绑定click事件 $("#emptyBtn").click(function(){ $("#thirdCell").empty(); }); }); </script> </body> </html> 第一张图:删除后恢复的图像不再具有附加数据和click事件第二张图:删除后恢复的图像与原来一致第三张图:删除后单元格本身并没有消失