jQuery remove() method can be used to remove the selected elements including all the texts and content. The method also removes data and events of the selected elements.
Syntax
The syntax of this method is given below:-
Description of the Parameters
The description of these parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the element to select and remove the element including text and nodes. You can use the element tag name, class name, or id to select. It is a required field. |
| innerselector | Specify the single or multiple comma-separated classes or id of the element to remove. You have to use the class name, or id to select. It is an optional field. |
jQuery remove() Method to Remove Single Element
If you want to remove the element as well as its content and nodes, you have to use this method as given below. You have to specify the element to select and remove.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $("p").remove(); }); }); </script> <style> p{ background:yellow; color:#000; padding:10px; } </style> <p>This is my paragraph. <b>Learn jQuery and other technical skills from Tutorialdeep.</b></p><br> <button type="button" class="mybtn">Click to Remove</button> |
Output
This is my paragraph. Learn jQuery and other technical skills from Tutorialdeep.
Click the button given above to remove the element and its content. It also removes the b element which is the child node of the selected element.
Remove Multiple Specified Element
You can also remove multiple elements using the jQuery remove() method. Specify the comma-separated class name or ids of the element to remove.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('.mybtnmulti').click(function(){ $("p").remove(".mypara1, .mypara2, .mypara3"); }); }); </script> <style> p{ background:orange; color:#fff; padding:10px; margin-bottom:5px; } </style> <p class="mypara1">First paragraph.</p> <p class="mypara2">Second paragraph.</p> <p class="mypara3">Third paragraph.</p><br> <button type="button" class="mybtnmulti">Click to Remove Multiple</button> |
Output
First paragraph.
Second paragraph.
Third paragraph.
There are three paragraph element in the above example. When you click the button given above, it removes all the paragraphs given above. The above example showing the class names specified as the parameter of the method.
You may also like to read
I hope you like this tutorial on jQuery remove() method. If you have any queries regarding the tutorial, please comment below.
References