过 jQuery,可以很容易地删除已有的 HTML 元素。
删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
实例
$("#div1").remove();
jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
实例
$("#div1").empty();
过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素:
实例
$("p").remove(".italic");
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
面的表格列出了所有用于处理 HTML 和 CSS 的 jQuery 方法。
下面的方法适用于 HTML 和 XML 文档。除了:html() 方法。
方法 | 描述 |
---|---|
addClass() | 向被选元素添加一个或多个类名 |
after() | 在被选元素后插入内容 |
append() | 在被选元素的结尾插入内容 |
appendTo() | 在被选元素的结尾插入 HTML 元素 |
attr() | 设置或返回被选元素的属性/值 |
before() | 在被选元素前插入内容 |
clone() | 生成被选元素的副本 |
css() | 为被选元素设置或返回一个或多个样式属性 |
detach() | 移除被选元素(保留数据和事件) |
empty() | 从被选元素移除所有子节点和内容 |
hasClass() | 检查被选元素是否包含指定的 class 名称 |
height() | 设置或返回被选元素的高度 |
html() | 设置或返回被选元素的内容 |
innerHeight() | 返回元素的高度(包含 padding,不包含 border) |
innerWidth() | 返回元素的宽度(包含 padding,不包含 border) |
insertAfter() | 在被选元素后插入 HTML 元素 |
insertBefore() | 在被选元素前插入 HTML 元素 |
offset() | 设置或返回被选元素的偏移坐标(相对于文档) |
offsetParent() | 返回第一个定位的祖先元素 |
outerHeight() | 返回元素的高度(包含 padding 和 border) |
outerWidth() | 返回元素的宽度(包含 padding 和 border) |
position() | 返回元素的位置(相对于父元素) |
prepend() | 在被选元素的开头插入内容 |
prependTo() | 在被选元素的开头插入 HTML 元素 |
prop() | 设置或返回被选元素的属性/值 |
remove() | 移除被选元素(包含数据和事件) |
removeAttr() | 从被选元素移除一个或多个属性 |
removeClass() | 从被选元素移除一个或多个类 |
removeProp() | 移除通过 prop() 方法设置的属性 |
replaceAll() | 把被选元素替换为新的 HTML 元素 |
replaceWith() | 把被选元素替换为新的内容 |
scrollLeft() | 设置或返回被选元素的水平滚动条位置 |
scrollTop() | 设置或返回被选元素的垂直滚动条位置 |
text() | 设置或返回被选元素的文本内容 |
toggleClass() | 在被选元素中添加/移除一个或多个类之间切换 |
unwrap() | 移除被选元素的父元素 |
val() | 设置或返回被选元素的属性值(针对表单元素) |
width() | 设置或返回被选元素的宽度 |
wrap() | 在每个被选元素的周围用 HTML 元素包裹起来 |
wrapAll() | 在所有被选元素的周围用 HTML 元素包裹起来 |
wrapInner() | 在每个被选元素的内容周围用 HTML 元素包裹起来 |
$.escapeSelector() | 转义CSS选择器中有特殊意义的字符或字符串 |
$.cssHooks | 提供了一种方法通过定义函数来获取和设置特定的CSS值 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.7.js"></script> <style type="text/css"> p:hover{ color:red; cursor:pointer; background:blue; } </style> <script type="text/javascript"> <!-- function f1() { //将标签从html文档中移除 $("#myDiv").remove(); } function f2() { //empty方法是清空对象中的内容 $("#myDiv").empty(); } //--> </script> </head> <body> <p>111111111111111111111111111111</p> <div id="myDiv" style="border:5px solid red; width:300px;height:200px;"> 大家好 我是div </div> <p>22222222222222222222222222222222</p> <input type="button" value="remove myDiv" onclick="f1()"> <input type="button" value="empty myDiv" onclick="f2()"> </body> </html>
*请认真填写需求信息,我们会在24小时内与您取得联系。