Description: Remove the set of matched elements from the DOM.
.remove( [ selector ] )
version added: 1.0
selector
A jQuery expression to filter the set of elements to be removed.
Similar to .empty(), the .remove() method takes elements out of the DOM. We use .remove() when we want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.
Consider the following HTML:
<div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
We can target any element for removal:
$('.hello').remove();
This will result in a DOM structure with the
<div class="hello"> element deleted:
<div class="container"> <div class="goodbye">Goodbye</div> </div>
If we had any number of nested elements inside <div class="hello">, they would be removed, too. Other jQuery constructs such as data or event handlers are erased as well.
We can also include a selector as an optional parameter. For example, we could rewrite the previous DOM removal code as follows:
$('div').remove('.hello');
This would result in the same DOM structure:
<div class="container"> <div class="goodbye">Goodbye</div> </div>
Examples
Example 1
Removes all paragraphs from the DOMExample 1 - Full source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function () {
$("p").remove();
});
});
</script>
<style>p { background:yellow; margin:6px 0; }</style>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button>Call remove() on paragraphs</button>
</body>
</html>
Example 2
Removes all paragraphs that contain "Hello" from the DOMExample 2 - Full source
Removes all paragraphs that contain "Hello" from the DOM<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>p { background:yellow; margin:6px 0; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function () {
$("p").remove(":contains('Hello')");
});
});
</script>
</head>
<body>
<p class="hello">Hello</p>
how are
<p>you?</p>
<button>Call remove(":contains('Hello')") on paragraphs</button>
</body>
</html>
Was this information helpful?
