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.
Example
Try this code »<script>
$(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.
Example
Try this code »<script>
$(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:
Example
Try this code »<script>
$(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.
Example
Try this code »<script>
$(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.
Example
Try this code »<script>
$(document).ready(function(){
// Removes the hyperlink's href attribute
$("button").click(function(){
$("a").removeAttr("href");
});
});
</script>
