在前端开发中，操作 DOM 元素是常见的操作之一。本文将介绍如何使用 jQuery 中的方法“淡出”（fade out）和“删除”（remove）来操作 DIV 元素，并提供示例代码。
1. 淡出一个DIV
当需要隐藏一个 DIV 元素时，可以使用 jQuery 的 fadeOut() 方法。该方法可以使元素以渐变的方式从可见状态过渡到隐藏状态，即实现了“淡出”效果。
1.1 基本用法
以下是 fadeOut() 方法的基本语法：
$(selector).fadeOut(speed, easing, callback)
其中：
selector：要进行淡出效果的元素的选择器。speed：可选参数，表示动画的速度。可以是毫秒数或者字符串"slow"、"fast"分别代表 600ms 和 200ms。easing：可选参数，表示动画的缓动函数。默认为"swing"，也可以设置为"linear"。callback：可选参数，表示动画完成后的回调函数。在动画完成后执行。
例如，对于以下 HTML 代码：
<div id="myDiv">Hello World!</div>
可以使用以下 jQuery 代码来实现“淡出”效果：
$("#myDiv").fadeOut();此时，myDiv 元素会以默认速度（400ms）从可见状态渐变到隐藏状态。
1.2 自定义动画效果
除了可以使用默认的速度和缓动函数，fadeOut() 方法还支持自定义动画效果。例如，可以通过传递一个数字来指定动画的速度：
$("#myDiv").fadeOut(1000);该代码将使 myDiv 元素以 1000ms 的速度从可见状态渐变到隐藏状态。
此外，还可以通过传递一个字符串来指定动画的缓动函数。例如：
$("#myDiv").fadeOut("linear");该代码将使 myDiv 元素以线性的速度从可见状态渐变到隐藏状态。
1.3 动画完成后的回调函数
在 fadeOut() 方法中，可以通过传递一个回调函数来在动画完成后执行一些操作。例如：
$("#myDiv").fadeOut(1000, function() {
console.log("Fade out completed!");
});该代码将使 myDiv 元素以 1000ms 的速度从可见状态渐变到隐藏状态，并在动画完成后输出一条信息到控制台。
2. 删除一个DIV
除了“淡出”效果外，有时候需要完全删除一个 DIV 元素。在 jQuery 中，可以使用 remove() 方法来实现这一操作。
2.1 基本用法
以下是 remove() 方法的基本语法：
$(selector).remove();
其中，selector 表示要删除的元素的选择器。
例如，对于以下 HTML 代码：
<div id="myDiv">Hello World!</div>
可以使用以下 jQuery 代码来删除 myDiv 元素：
$("#myDiv").remove();2.2 删除包含子元素的DIV
当需要删除一个包含子元素的 DIV 元素时，可以使用 empty() 方法先清空子元素，然后再使用 remove() 方法删除该元素本身。
例如，对于以下 HTML 代码：
<div id="myDiv"> <p>Hello World!</p> </div>
可以使用以下 jQuery 代码来删除 myDiv 元素及其子元素：
$("#myDiv").empty().remove();3. 示例代码
下面是一个示例，演示如何在按钮点击时“淡出”并删除一个 DIV 元素：
<!DOCTYPE html> <html> <head> > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/9147) ，转载请注明来源 [https://www.javascriptcn.com/post/9147](https://www.javascriptcn.com/post/9147)
