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
leave a comment
0 Comments