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:
<html> <head> 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:
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:
<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> |
Output:
Before clicking on button :
After clicking on button :
Except button everything get remove
Recommended Posts:
- jQuery | jQuery.fx.interval Property with example
- jQuery | jQuery.fx.off Property
- jQuery | jQuery.support Property
- jQuery | jquery Property
- jQuery | Remove Elements
- JQuery | Remove âdisabledâ attribute from an element
- How to remove table row from table using jQuery ?
- How to fadeOut and remove a div using jQuery ?
- How to remove options from select element using jQuery ?
- How to Add and Remove multiple classes in jQuery ?
- How to remove all inline styles using JavaScript/jQuery ?
- How to remove CSS style of <style> tag using JavaScript/jQuery ?
- How to remove CSS âtopâ and âleftâ attribute with jQuery ?
- How to Remove an Event Handler using jQuery ?
- How to remove specific value from array using jQuery ?
- How to Dynamically Add/Remove Table Rows using jQuery ?
- jQuery callbacks.remove() Method
- How to remove parent element except its child element using jQuery ?
- JQuery | Multiple ID selectors
- jQuery | :input Selector
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.
