JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE

jQuery Remove Elements & Attribute

In this tutorial you will learn how to remove the HTML elements or its contents as well as its attribute from the document using jQuery.

jQuery Remove Elements or Contents

jQuery provides handful of methods, such as empty(), remove(), unwrap() etc. to remove existing HTML elements or contents from the document.

jQuery empty() Method

The jQuery empty() method removes all child elements as well as other descendant elements and the text content within the selected elements from the DOM.

The following example will remove all the content inside of the elements with the class .container on click of the button.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Empty container element
  •     $("button").click(function(){
  •        $(".container").empty();
  •     });
  • });
  • </script>

Note: According to the W3C (World Wide Web Consortium) DOM specification, any string of text within an element is considered a child node of that element.


jQuery remove() Method

The jQuery remove() method removes the selected elements from the DOM as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.

The following example will remove all the <p> elements with the class .hint from the DOM on button click. Nested elements inside these paragraphs will be removed, too.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Removes paragraphs with class "hint" from DOM
  •     $("button").click(function(){
  •        $("p.hint").remove();
  •     });
  • });
  • </script>

The jQuery remove() method can also include a selector as an optional parameter, that allows you to filter the elements to be removed. For instance, the previous example's jQuery DOM removal code could be rewritten as follows:

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Removes paragraphs with class "hint" from DOM
  •     $("button").click(function(){
  •        $("p").remove(".hint");
  •     });
  • });
  • </script>

Note: You can also include selector expression as a parameter within the jQuery remove() method, like remove(".hint, .demo") to filter multiple elements.


jQuery unwrap() Method

The jQuery unwrap() method removes the parent elements of the selected elements from the DOM. This is typically the inverse of the wrap() method.

The following example will remove the parent element of <p> elements on button click.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Removes the paragraph's parent element
  •     $("button").click(function(){
  •        $("p").unwrap();
  •     });
  • });
  • </script>

jQuery removeAttr() Method

The jQuery removeAttr() method removes an attribute from the selected elements.

The example below will remove the href attribute form the <a> elements on button click.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Removes the hyperlink's href attribute
  •     $("button").click(function(){
  •        $("a").removeAttr("href");
  •     });
  • });
  • </script>

Your Feedback:

We would love to hear from you, please drop us a line.