jQuery Remove
To remove existing HTML elements or data from the document, jQuery provides a number of methods such as empty(), remove(), unwrap(), and so on.
jQuery empty() Method
The jQuery empty() function clears the DOM of all child elements, descendant elements, and text content within the chosen elements.
On clicking the button, the following example will erase all content within the elements with the p tag.
jQuery remove() Method
The jQuery remove() function deletes the chosen items as well as everything within them from the DOM. All bound events and jQuery data connected with the elements are deleted in addition to the elements themselves.
On button click, the following example will delete any <p> elements with the class.msg from the DOM. Nested items inside these paragraphs will also be eliminated.
The optional argument selector to the jQuery remove() function allows you to filter the elements to be deleted. For example, the jQuery DOM removal code in the above example may be changed as follows:
jQuery unwrap() Method
The jQuery unwrap() function removes the chosen items' parent elements from the DOM. Typically, this is the inverse of the wrap() function.
On button click, the following example will delete the parent element of <p> elements.
jQuery removeAttr() Method
The removeAttr() function of jQuery removes an attribute from the chosen components.
On button click, the following example removes the src property from the <img> components.