The jQuery remove function removes the selected element from the page and also removes the internal content of it. It removes everything of the selected element and in addition to this, it also removes the data and the events associated with the selected element.
See the example given below.
Example of jQuery remove
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ $("#btn-remove").click(function(){ $("#divremove").remove(); }); }); </script> <button id="btn-remove">Click me to Remove</button> <div id="divremove"> <p>Welcome to Tutorialdeep!</p> <em>Learn jQuery With Live Examples.</em> </div> |
Output
Welcome to Tutorialdeep!
Learn jQuery With Live Examples.
The above example contains the button and a div element which you have to remove using the jQuery remove method. When you click the ‘Click me’ button, the script removes the div element and all its internal child content.
Syntax of jQuery remove()
|
1 |
$(selector1).after(selector2) |
| Sr. No | Parameter Name | Description |
|---|---|---|
| 1 | selector1 | Specify the element you want to select and remove from the page. It is the required field. |
| 2 | selector2 | Specify the element id or class name with this second parameter. You can select multiple element of same tag name using comma separated id or classname. It is the optional field. |
jQuery Remove Multiple Elements of Same Type
If you want to remove multiple elements of the same HTML tag type, you can do so by using the second parameter of the remove() and using the comma-separated ids or class name.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(document).ready(function(){ $("#btn-removemulti").click(function(){ $("div").remove("#divpara,#divspan,#divem"); }); }); </script> <p>When you click the button, it removes all the contents given below.</p> <button id="btn-removemulti">Click me to Remove</button> <div id="divpara"> <p>Tutorialdeep is a Web Development and Blogging Tutorial.</p> </div> <div id="divspan"> <span>Learn Web Development Here.</span> </div> <div id="divem"> <em>Learn jQuery With Working Examples.</em> </div> |
Output
When you click the button, it removes all the contents given below.
Tutorialdeep is a Web Development and Blogging Tutorial.
The above example removes the selected div element with multiple ids specified in the second parameter of the remove(). You have to pass the argument as comma-separated ids of div element.
You must also learn:-