jQuery empty() method can be used to remove the content including all child nodes of the selected element. It does not remove the specified element but removes all its inner content.
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 all its content. You can use the element tag name, class name, or id to select. It is a required field. |
jQuery empty() Method to Remove Element Content
If you want to remove the element content and its inner child nodes, you have to use this method as given below. It requires no parameters to pass and use the function. The below example removes the content of the paragraph element.
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").empty(); }); }); </script> <style> p{ background:orange; color:#fff; padding:10px; } </style> <p>This is my paragraph. <em>Learn jQuery from Tutorialdeep.</em></p><br> <button type="button" class="mybtn">Click to Empty</button> |
Output
This is my paragraph. Learn jQuery from Tutorialdeep.
Click the button given above to remove the content of the paragraph element. It also removes the em element which is the child node of the paragraph element
You may also like to read
I hope you like this tutorial on jQuery empty() method. If you have any queries regarding the tutorial, please comment below.
References