For removing the elememt using jQuery, we can remove a single or multiple elements using remove() function. Here, we will help you to remove an element using jQuery. This function wil remove data and all the events of the selected elements.

Syntax for jQuery remove()

$(selector).remove()

With the help of jQuery remove() function, it is quite easy to remove HTML elements. To do so, you have to add the javascript file for accessing the remove(). It will removes the selected elements including child nodes and all text.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
Example: 1 for Remove()

In this example, it will return all the data of the selected elements deleted.

<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> 

Using its corresponsing class name, we can find and remove elements with the help of below jQuery code.

Syntax for Remove() using Class Name

$(“.class_name”).remove()
Example: 2 remove() with classname

The output of the below example is, it will return all the portion deleted on the page with the class name.

<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> 

Leave a Reply

Your email address will not be published. Required fields are marked *