jQuery 删除或是清空某个HTML元素示例_jquery

jQuery使用下面两个方法来删除或是清空某个HTML元素。

remove() – 删除指定的元素(包括其子元素)
empty() – 清空指定元素的子元素

例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div1").remove();
});
});
</script>
</head>
<body> 

<div id="div1" style="height: 100px; width: 300px;
border: 1px solid black; background-color: yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p> 

</div>
<br>
<button>Remove div element</button> 

</body>
</html>
empty:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div1").empty();
});
});
</script>
</head>
<body> 

<div id="div1" style="height: 100px; width: 300px;
border: 1px solid black; background-color: yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p> 

</div>
<br>
<button>Empty the div element</button> 

</body>
</html>

jQuery的remove()方法也支持一个参数,可以用于过滤一些需要删除的HTML元素。这个参数可以为任何有效的jQuery selector.
比如下面代码只删除class=”italic”的<p>元素:

$("p").remove(".italic");

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
HTML元素
jquery清空子元素、jquery 清空元素、jquery清空元素内容、jquery 清空数组元素、jquery清空所有子元素,以便于您获取更多的相关知识。

时间: 2024-11-10 00:11:13

jQuery 删除或是清空某个HTML元素示例_jquery的相关文章

jquery序列化表单去除指定元素示例代码

这篇文章主要介绍了如何使用jquery序列化表单去除指定元素,需要的朋友可以参考下 代码如下: <html>  <head>  </head>  <body>  <form name="form1">  <input type="hidden" name="page1" class="flau_u_ro" value="1"></

Jquery组件easyUi实现表单验证示例_jquery

本文实例为大家分享了Jquery easyUi表单验证实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Form - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hr

jquery使用animate方法实现控制元素移动_jquery

本文实例讲述了jquery使用animate方法实现控制元素移动.分享给大家供大家参考.具体分析如下: 通过jquery的animate方法控制元素移动,这里需要将元素的位置定义为relative, fixed, 或者 absolute! <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(docume

jQuery通过点击行来删除HTML表格行的实现示例_jquery

jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一.它不仅不会减少在JavaScript编码简单的技术开销,而且也使您的代码的跨浏览器兼容.我已经写了许多关于jQuery教程,这个时候,我也用这个简单的纯实现了.任务是从一个HTML表使用一些时髦的效果,只要按一下该行的行.以下是实现这一目标的jQuery代码. $(document).ready(function() { $("#sample tr").click(function() { //change t

jQuery获取动态生成的元素示例_jquery

需求描述:页面上可以动态添加数据,比如table,点击按钮可以动态添加行.又或页面 加载时table数据是通过ajax从后台获取的.而这时我们想要获取其中的某个值,又该如何获取呢? 如果是要通过某个事件来获取的比如click,mouseover等等,则可以使用live()方法 复制代码 代码如下: $(".button").live("click",function(){ console.info($("#mytd").html()); }) 而

jquery序列化表单去除指定元素示例代码_jquery

复制代码 代码如下: <html> <head> </head> <body> <form name="form1"> <input type="hidden" name="page1" class="flau_u_ro" value="1"></input> <input type="hidden"

jQuery函数的等价原生函数代码示例_jquery

我们针对常用的jQuery方法以及其等价原生方法的性能做了一些测试(1, 2, 3). 我知道你在想什么.原生方法明显要比jQuery方法快,因为jQuery方法要处理浏览器兼容以及其他一些事情.是的,我完全赞成.写这篇文章并不是出于反对使用jQuery,但如果你针对的是现代浏览器,那么使用原生方法会使性能有很大的提升. 许多开发者没有意识到大多数他们使用的jQuery方法可以使用原生方法,或者更轻量级的方法来代替.下面是一些代码示例,展示一些常用的jQuery方法,以及其等价原生方法. 译者注

Jquery插件easyUi实现表单验证示例_jquery

要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: //学号格式只能为数字 ****//这里没有问题**** number: {//value值为文本框中的值 validator: function (value) { var reg = /^[0-9]*$/; return reg.test(value); }, messag

jQuery+ajax实现无刷新级联菜单示例_jquery

前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 CasMenu.aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC &quo