Skip to content
Related Articles

Related Articles

jQuery | remove()
  • Last Updated : 13 Feb, 2019

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :