The jQuery empty function removes all the internal content including HTML elements of the selected element. It does not remove the selected element but removes content inside the selected element.
Example of jQuery empty
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $("#btn-empty").click(function(){ $("#divempty").empty(); }); }); </script> <p>When you click the button, it makes below content empty.</p> <button id="btn-empty">Click me to Empty</button> <div id="divempty"> <p>Welcome to Tutorialdeep Web Tutorial.</p> <em>Learn jQuery With Working Examples.</em> </div> |
Output
When you click the button, it makes below content empty.
Welcome to Tutorialdeep Web Tutorial.
Learn jQuery With Working Examples.
The example given above contains the button and the div element which you have to make empty using the jQuery empty method. When you click the ‘Click me’ button given above, the script makes the div element empty by removing all the child content of the selected element.
Syntax of jQuery empty()
|
1 |
$(selector).empty() |
| Sr. No | Parameter Name | Description |
|---|---|---|
| 1 | selector | Specify the element you want to select and make it empty by removing the child elements. It is the required field. |
jQuery Empty Multiple Elements on Click
If you want to empty multiple elements of the same HTML tag type, you can do so by adding click event on all the div. Here, see below example to find out how you can perform this task.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $("div.div-empty").click(function () { $(this).empty(); }); }); </script> <p>Click the below colored box to make it empty.</p> <div class="div-empty" style="background:red;padding:10px;margin:5px 0;color:#fff;"> <p>Tutorialdeep is a Web Development and Blogging Tutorial.</p> </div> <div class="div-empty" style="background:green;padding:10px;margin:5px 0;color:#fff;"> <span>Learn Web Development Here.</span> </div> <div class="div-empty" style="background:blue;padding:10px;margin:5px 0;color:#fff;"> <em>Learn jQuery With Working Examples.</em> </div> |
Output
Click below colored div’s to make them empty.
Tutorialdeep is a Web Development and Blogging Tutorial.
The above example makes all the clicked div’s empty. The script uses the class name of the div to select the element and apply the jQuery empty method.
You must also learn:-