jQuery uses the following two methods to delete or clear an HTML element.
remove() – delete the specified element (including its sub-elements)
empty() – Empty the child elements of the specified element
For example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js"></script> <script> $(document).ready(function () { $("button").click(function () { $("#div1").remove(); }); }); </script> </head> <body> <div id="div1" style="height: 100px; width: 300px; border: 1px solid black; background-color: yellow;"> This is some text in the div. <p>This is a paragraph in the div.</p> <p>This is another paragraph in the div.</p> </div> <br> <button>Remove div element</button> </body> </html> empty: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js"></script> <script> $(document).ready(function () { $("button").click(function () { $("#div1").empty(); }); }); </script> </head> <body> <div id="div1" style="height: 100px; width: 300px; border: 1px solid black; background-color: yellow;"> This is some text in the div. <p>This is a paragraph in the div.</p> <p>This is another paragraph in the div.</p> </div> <br> <button>Empty the div element</button> </body> </html>
jQuery’s remove() method also supports a parameter that can be used to filter some HTML elements that need to be deleted. This parameter can be any valid jQuery selector.
For example, the following code only deletes the
element with class="italic":
$("p").remove(".italic");