jQuery remove() Method

Last Updated : 10 Jul, 2023

The remove() method in JQuery is 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.

Example 1: In this example, we are using jQuery remove method.

html

<!DOCTYPE html>
<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>

Output:

jquery-23

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

Syntax:

$(".class_name").remove()

Return value: It will return all the portions deleted on the page with the class name.

Example 2:

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

Example 2: In this example, we are using jQuery remove() method.

html

<!DOCTYPE html>
<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 () {
                $(".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>

Output:

jquery-24

jQuery removeAttr() Method

kundankumarjha

Improve

Article Tags :

jQuery remove() Method

html

html

Similar Reads

Thank You!

What kind of Experience do you want to share?