jQuery | remove()

The remove() method in JQuery used to remove all the selected elements including all the text. This method also remove data and all the events of the selected elements.
Syntax:

$(selector).remove()

Return Value: It will return all the data of the selected elements deleted.
Example 1:

Input: $("p").remove()
Output: Output will be all the elements of the paragraph get deleted.

Code 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <script src="https://ajax.googleapis.com/ajax/
                 libs/jquery/3.3.1/jquery.min.js">
        //this is JQuery CDN directed from the JQuery website
    </script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p").remove();
            });
        });
    </script>
</head>
  
<body>
    <div style="padding-left:220px;padding-top:100px;">
        <p style="font-size:35px;">Welcome to GFG!!!.</p>
        <button style="padding:15px;">Click ME</button>
    </div>
</body>
  
</html>

chevron_right


Output:
Before clicking the button :

After clicking on button :

We can also find and remove elements using its class name with the help of JQuery remove() method.
Syntax:

$(".class_name").remove()

Return value: It will return all the portion deleted on the page with the class name.
Example 2:

Input: $(".geek").remove()
Output: Here "gfg!!!" get deleted. 

Code #2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
                /jquery/3.3.1/jquery.min.js">
        //this is JQuery CDN directed from the JQuery website
    </script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $(".geeks").remove();
            });
        });
    </script>
</head>
  
<body>
    <div style="margin-left:180px; font-size:35px;padding-top:100px">
        <p class="geeks">Welcome to GFG!!!.</p>
        <p class="geeks">Hello, My class is geeks</p>
        <button>Click ME</button>
    </div>
</body>
  
</html>

chevron_right


Output:
Before clicking on button :

After clicking on button :

Except button everything get remove



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.