如何使用 jQuery 淡出和删除 div？

给定一个 div 元素。任务是使用 JQuery 使用淡出效果将其删除。以下是讨论的几种方法。
先了解几个方法。

jQuery text() 方法：
此方法设置/返回所选元素的文本内容。
如果此方法用于返回内容，则提供所有匹配元素的文本内容（将删除 HTML 标签）。
如果使用此方法设置内容，它将替换所有匹配元素的内容。
句法：
- 返回文本内容：
```
$(selector).text()
```
- 设置文本内容：
```
$(selector).text(content)
```
- 使用函数设置文本内容：
```
$(selector).text(function(index, curContent))
```
参数：
- 内容：此参数是必需的。它指定所选元素的新文本内容。
- 函数(index, curContent)：这个参数是可选的。它指定了一个函数，该函数返回所选元素的新文本内容。
  - index：返回集合中元素的索引位置。
  - curContent：返回所选元素的当前内容。
jQuery 效果 fadeOut() 方法
此方法逐渐将选定元素的不透明度从可见更改为隐藏（褪色效果）。
句法：
```
$(selector).fadeOut(speed, easing, callback)
```
参数：
- 速度：此参数是可选的。它指定褪色效果的速度。默认值 = 400 毫秒。
  适用值。
  - 毫秒
  - “慢的”
  - “快速地”
- easing：此参数是可选的。它指定元素在动画不同点的速度。默认值 = “摆动”。
  适用值。
  - “摇摆”：它开始缓慢，但在中间更快。
  - “线性”：它以恒定的速度移动。
- 回调：此参数是可选的。它指定在fadeOut() 方法完成后要执行的函数。
jQuery on() 方法
此方法为选定元素和子元素添加一个或多个事件处理程序。
句法：
```
$(selector).on(event, childSelector, data, function, map)
```
参数：
- 事件：此参数是必需的。它指定一个或多个事件或命名空间以附加到所选元素。
  在多个事件值的情况下，它们用空格分隔。事件必须是有效的。
- childSelector：这个参数是可选的。它指定事件处理程序只应附加到已定义的子元素。
- 数据：此参数是可选的。它指定要传递给函数的附加数据。
- 函数：此参数是必需的。它指定事件发生时要运行的函数。
- map：它指定一个事件映射 ({event:func(), event:func(), ...})，其中包含一个或多个要添加到选定元素的事件，以及在事件发生时运行的函数。
jQuery remove() 方法
此方法删除选定元素，包括所有文本和子节点以及选定元素的数据和事件。
句法：
```
$(selector).remove(selector)
```
参数：
- 事件：此参数是可选的。它指定要删除的一个或多个元素。使用逗号作为分隔符来删除多个元素。

示例 1：在此示例中， div 元素在淡出效果300 毫秒后被移除。



  

    
        JQuery 
      | How to FadeOut and Remove a div.
    
    
    

  

      
            GeeksForGeeks  
        
    
        click the button to remove DIV with fade effect.

输出：

在点击按钮之前：
点击按钮后：

示例 2：此示例与之前的示例类似。在这个例子中， div 元素在淡出效果300 毫秒后通过不同的方法被移除。



  

    
        JQuery 
      | How to FadeOut and Remove a div.
    
    
    

  

      
            GeeksForGeeks  
        
    
        click the button to remove DIV with fade effect.

输出：

在点击按钮之前：
点击按钮后：