jQuery - 删除元素
通过 jQuery,可以很容易地删除已有的 HTML 元素。
删除元素/内容
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
jQuery remove() 方法删除被选元素及其子元素。
ps:所选元素加上子元素都会被删除
code:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.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>删除 div 元素</button>
</body>
</html>
jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
ps:只删除所选元素的子元素,下面效果是清楚div里面的内容
code:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
原文地址:https://www.cnblogs.com/huchong-bk/p/11368607.html
- gradle项目与maven项目相互转化
- rpc框架之gRPC 学习 - hello world
- Angular Service入门
- spring:如何用代码动态向容器中添加或移除Bean ?
- WebComponent魔法堂:深究Custom Element 之 标准构建
- druid 数据源 使用属性文件的一个坑
- Angular企业级开发(3)-Angular MVC实现
- spring: 加载远程配置
- java:如何让程序按要求自行重启?
- Angular学习-指令入门
- java:如何让程序按要求自行重启?
- linux:nohup 不生成 nohup.out的方法
- 让VIM支持Python2 by update-alternatives
- Angular中ngCookies模块介绍
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [重拾CSS]一道面试题来看伪元素、包含块和高度坍塌
- webpack 拍了拍你,给了你一份图解指南(模块化部分)
- 深入探究Immutable.js的实现机制(一)
- 深入探究immutable.js的实现机制(二)
- ES6 Promise 的最佳实践
- 「 Map最佳实践」什么时候适合使用 Map 而不是 Object
- ES2017 异步函数的最佳实践(`async` /`await`)
- React Hooks中这样写HTTP请求可以避免内存泄漏
- 用了这 7 个 VS Code 插件,想写一辈子代码
- 听说你还不知道Promise的allSettled()和all()的区别?
- React 条件渲染最佳实践(7 种方法)
- 一文带你层层解锁「文件下载」的奥秘
- Android实现简单C/S聊天室应用
- Android仿IOS回弹效果 支持任何控件
- 送你一道字节前端原题(Add sumOf)|文末送红宝书