jQuery Tutorial
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
jQuery Useful Resources
Selected Reading
- jQuery - AJAX
- jQuery - Attributes
- jQuery - Events
- jQuery - Selectors
- jQuery - Syntax
- jQuery - Basics
- jQuery - Overview
- jQuery - Home
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
- jQuery - Weather.js
- jQuery - Megadropdown.js
- jQuery - Producttour.js
- jQuery - Blockrain.js
- jQuery - Checkout.js
- jQuery - Whatsnearby.js
- jQuery - Filer.js
- jQuery - LogosDistort.js
- jQuery - Tagsort.js
- jQuery - Drawsvg.js
- jQuery - Slideshow.js
- jQuery - Progressbar.js
- jQuery - Alertify.js
- jQuery - Rowgrid.js
- jQuery - Slidebar.js
- jQuery - Multiscroll.js
- jQuery - Flickerplate.js
- jQuery - PagePiling.js
- jQuery - Plugins
jQuery Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery - Remove Elements
jQuery - Remove Elements
jQuery provides remove() and empty() methods to remove existing HTML elements from an HTML document.
jQuery remove() Method
The jQuery remove() method removes the selected element(s) and it s child elements from the document.
Following is the syntax of the remove() method:
$(selector).remove();
You should use remove() method when you want to remove the element itself, as well as everything inside it.
Synopsis
Consider the following HTML content:
<span class="container"> <h2>jQuery remove() Method</h2> <span class="hello">Hello</span> <span class="goodbye">Goodbye</span> </span>
Now if we apply the remove() method as follows:
$( ".hello" ).remove();
It will produce following result:
<span class="container"> <h2>jQuery remove() Method</h2> <span class="goodbye">Goodbye</span> </span>
If we had any number of nested elements inside <span class="hello">, they would be removed, too.
Example
Let s try the following example and verify the result:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").cpck(function(){
$( ".hello" ).remove();
});
});
</script>
</head>
<body>
<span class="container">
<h2>jQuery remove() Method</h2>
<span class="hello">Hello</span>
<span class="goodbye">Goodbye</span>
</span>
<br>
<button>Remove Text</button>
</body>
</html>
Remove with Filter
We can also include a selector as an optional parameter for the remove() method. For example, we could rewrite the previous DOM removal code as follows:
Let s try the following example and verify the result:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").cpck(function(){
$("span").remove(".hello");
});
});
</script>
</head>
<body>
<span class="container">
<h2>jQuery remove(selector) Method</h2>
<span class="hello">Hello</span>
<span class="goodbye">Goodbye</span>
</span>
<br>
<button>Remove Text</button>
</body>
</html>
jQuery empty() Method
The jQuery empty() method is very similar to remove() which removes the selected element(s) and it s child elements from the document. This method does not accept any arguments.
Following is the syntax of the empty() method:
$(selector).empty();
You should use empty() method when you want to remove the element itself, as well as everything inside it.
Synopsis
Consider the following HTML content:
<span class="container"> <h2>jQuery empty() Method</h2> <span class="hello">Hello</span> <span class="goodbye">Goodbye</span> </span>
Now if we apply the empty() method as follows:
$( ".hello" ).empty();
It will produce following result:
<span class="container"> <h2>jQuery empty() Method</h2> <span class="goodbye">Goodbye</span> </span>
Example
Let s try the following example and verify the result:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").cpck(function(){
$( ".hello" ).empty();
});
});
</script>
</head>
<body>
<span class="container">
<h2>jQuery empty() Method</h2>
<span class="hello">Hello</span>
<span class="goodbye">Goodbye</span>
</span>
<br>
<button>Remove Text</button>
</body>
</html>
jQuery HTML/CSS Reference
You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: .
Advertisements