How to fadeOut and remove a div using jQuery ?

Given a div element. The task is to remove it with a fadeOut effect using JQuery. Here are few methods discussed.
First few methods to know.

  • jQuery text() Method:
    This method sets/returns the text content of the selected elements.
    If this method is used to return content, it provides the text content of all matched elements (HTML tags will be removed).
    If this method is used to set content, it replace the content of ALL matched elements.
    Syntax:

    • Returns text content:



      $(selector).text()
      
    • Sets text content:

      $(selector).text(content)
      
    • Set text content using a function:

      $(selector).text(function(index, curContent))
      

    Parameters:

    • content: This parameter is required. It specifies the new text content for the selected elements.
    • function(index, curContent): This parameter is optional. It specifies a function that returns the new text content for the selected elements.
      • index: It returns the index position of the element in the set.
      • curContent: It returns current content of selected elements.
  • jQuery Effect fadeOut() Method
    This method gradually changes the opacity, for selected elements, from visible to hidden (fading effect).
    Syntax:

    $(selector).fadeOut(speed, easing, callback)
    

    Parameters:

    • speed: This parameter is optional. It specifies the speed of the fading effect. Default value = 400 milliseconds.
      Applicable values.

      • milliseconds
      • “slow”
      • “fast”
    • easing: This parameter is Optional. It specifies the speed of the element in different points of the animation. Default value = “swing”.
      Applicable values.

      • “swing”: It starts slowly, but faster in the middle.
      • “linear”: It moves in a constant speed.
    • callback: This parameter is optional. It specifies a function to be executed after the fadeOut() method is completed.
  • jQuery on() Method
    This method adds one or more event handlers for the selected elements and child elements.
    Syntax:

    $(selector).on(event, childSelector, data, function, map)
    

    Parameters:

    • event: This parameter is required. It specifies one or more event(s) or namespaces to attach to the selected elements.
      In case of multiple event values, those are separated by space. Event must be a valid.
    • childSelector: This parameter is optional. It specifies that the event handler should only be attached to the defined child elements.
    • data: This parameter is optional. It specifies additional data to pass to the function.
    • function: This parameter is required. It specifies the function to run when the event occurs.
    • map: It specifies an event map ({event:func(), event:func(), …}) having one or more event to add to the selected elements, and functions to run when the events happens.
  • jQuery remove() Method
    This method removes the selected elements, including all text and child nodes along with the data and events of the selected elements.
    Syntax:



    $(selector).remove(selector)
    

    Parameters:

    • event: This parameter is optional. It specifies one or more elements to be removed. Use comma as separator to remove multiple elements.

Example 1: In this example the div element is removed after fadeOut effect for 300 milliseconds.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JQuery 
      | How to FadeOut and Remove a div.
    </title>
    <script src=
    </script>
    <style>
        #div {
            height: 60px;
            width: 200px;
            background-color: green;
            margin: 0 auto;
        }
    </style>
</head>
  
<body style="text-align:center;" id="body">
    <h1 id="h" style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px; 
              font-weight: bold;">
        click the button to remove DIV with fade effect.
    </p>
    <div id="div">
    </div>
    <br>
    <button>
        click to remove
    </button>
    <p id="GFG_DOWN" 
       style="color:green; 
              font-size: 20px; 
              font-weight: bold;">
    </p>
    <script>
        $('button').on('click', function(e) {
            $('#div').fadeOut(300, function() {
                $('#div').remove();
            });
            $("#GFG_DOWN").text("DIV Removed");
        });
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example is similar to previous. In this example the div element is removed after fadeOut effect for 300 milliseconds with a different approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JQuery 
      | How to FadeOut and Remove a div.
    </title>
    <script src=
    </script>
    <style>
        #div {
            height: 60px;
            width: 200px;
            background-color: green;
            margin: 0 auto;
        }
    </style>
</head>
  
<body style="text-align:center;" 
      id="body">
    <h1 id="h" 
        style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px; font-weight: bold;">
        click the button to remove DIV with fade effect.
    </p>
    <div id="div">
    </div>
    <br>
    <button onclick='$("#div").fadeOut(300, function() 
                     { $(this).remove(); $("#GFG_DOWN")
                     .text("DIV Removed"); });'>
        click to remove
    </button>
    <p id="GFG_DOWN"
       style="color:green;
              font-size: 20px; 
              font-weight: bold;">
    </p>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.