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.

Example

Preview

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.

Example

Preview

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:

Example

Preview

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.

Example

Preview

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.

Example

Preview