jQuery Remove

In this tutorial you will learn how to use jQuery Remove property 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.

Try it

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.

jQuery unwrap() Method (Removing parent)

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.

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.