In this tutorial, you will learn how to remove text and element from html using jQuery empty(), remove(), unwrap() method by id, name class and tag.
jQuery Remove Text and Element Methods
There are three types of method available to remove the text, element or content, you can use these methods to remove the text, element or content.
- empty() method
- remove() method
- unwrap() method
jQuery empty() Method
The empty() method in jQuery is used to remove all child elements (including text and other nodes) from the selected HTML element(s). It essentially clears the content of the element, leaving it empty. This method is commonly used when you want to remove the content of an element or a group of elements, but not the element itself.
Here’s the basic syntax of the empty() method:
$(selector).empty();
Example of jQuery empty() method
You can see that example of the empty() method, the following example will remove all the contents inside the elements with the class on the click of the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
padding: 15px;
background: #1EBBA3;
border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn_empty").click(function(){
$("#contents").empty();
});
});
</script>
</head>
<body>
<div id="contents" class="container">
<h1>Hello World!</h1>
<p class="hint"><strong>Note:</strong> If you click the following button it will remove all the contents of the container div including the button.</p>
<button type="button" id="btn_empty">Click Here</button>
</div>
</body>
</html>
Output
Hello World!
Note: If you click the following button it will remove all the contents of the container div including the button.
jQuery remove Method
The jQuery remove() method can remove the selected html elements from the DOM as well as everything inside it. This method also removes the data and events of the selected elements.
Syntax
$(selector).remove(selector);
Parameters of remove() method
| Parameter | Description |
|---|---|
| Selector | is an optional parameter. It specifies whether to remove one or more elements. If you have to remove more than one element then you should separate them with comma (,). |
Example of jQuery remove() method
You can see that example of the remove() method, the following example will remove the selected paragraph.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
padding: 15px;
background: #1EBBA3;
border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn_remove").click(function(){
$("#con_div").remove();
});
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
<p id="con_div"><strong>Note:</strong> If you click the following button it will remove this paragraph</p>
<button type="button" id="btn_remove">Click Here</button>
</div>
</body>
</html>
Output
Hello World!
Note: If you click the following button it will remove this paragraph
jQuery unwrap()
Using the jQuery unwrap() method can remove the parent element of the selected elements.
Syntax
$(selector).unwrap();
Example of jQuery unwrap() method
You can see that the unwrap() method, the following example will remove the original element of
elements on the button click.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
padding: 15px;
background: #1EBBA3;
border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn_wrap").click(function(){
$("#con_wrap").unwrap();
});
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
<p id="con_wrap"><strong>Note:</strong> If you click the following button it will remove the parent element of this paragraph.</p>
<button type="button" id="btn_wrap">Click Here</button>
</div>
</body>
</html>
Output
Hello World!
Note: If you click the following button it will remove the parent element of this paragraph.
Recommended jQuery Tutorial
- jQuery Remove Attribute and Disabled Attribute From Element
- jQuery | Event MouseUp By Example
- Event jQuery Mouseleave By Example
- jQuery Event Mouseenter Example
- Event jQuery MouseOver & MouseOut By Example
- keyup jquery event example
- Jquery Click Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
- To Remove whitespace From String using jQuery
- jQuery Ajax Post Method Example
- jQuery Ajax Get Method Example
- To Load/Render html Page in div Using jQuery Ajax $.load
- jQuery Sibling Methods – To Find Siblings Elements
- jQuery Find Siblings Elements with Class, id
