jQuery Remove Elements or Contents:
Using jQuery you can remove existing HTML elements or content form your document.
Following are the jQuery remove methods that allow us to remove the existing content:
- empty()
- remove()
- unwrap()
- removeAttr()
jQuery empty() Method:
The jQuery empty() method allows us to removes all child elements as well as other successor elements and the text content within the selected elements from the DOM.
In the above example when you click on the button it will remove the content inside of the selected elements.
jQuery remove() Method:
The jQuery remove method allows us to remove the selected elements from the DOM as well as everything inside it.
In the following example, all <p> elements are removed with the class .demo from the DOM on button click, nested elements inside these paragraphs will also be removed.
The jQuery remove() method has a selector as an optional parameter, that allows you to filter the elements to be removed.
For example, the previous example’s jQuery DOM removal code could be rewritten as follows:
jQuery unwrap() Method:
The unwrap() method of jQuery removes the parent elements of the selected elements from the DOM. This method id inverse of wrap() method.
In the following example, the parent element of <p> elements will be removed on a button click.
jQuery removeAttr() Method:
The removeAttr() method of jQuery removes an attribute from the selected elements.
In the following example, when you click on the button it will remove the href attribute from the <a> elements on the button click.