jQuery remove text/content from html elements; Through this tutorial, i am going to show you how to delete/remove text from html elements using jQuery empty(), remove(), unwrap() method by id, name and attribute of elements. And as well as, how to remove/delete html element property or style property.
jQuery Remove Text and Element
There are three types of method available to remove text/content and the html element:
- empty() method
- remove() method
- unwrap() method
jQuery empty() Method
Using the jQuery empty () method; you can remove all child nodes or elements and content from selected HTML elements.
Syntax jQuery empty() Method
$(selector).empty();
Example 1 – jQuery Remove Content Inside Div, Button, Span by Id
See the following example will remove all the contents inside the elements (div, p, span etc tag) 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>
jQuery remove Method
Using 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 jQuery remove Method
$(selector).remove(selector);
Parameters of jQuery 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 1 – jQuery Remove Paragraph Text by Id
See the following example to remove text from the selected paragraph using jQuery remove():
<!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>
jQuery unwrap() Method
Using the jQuery unwrap() method can remove the parent element of the selected elements.
Syntax jQuery unwrap() Method
$(selector).unwrap();
Example 1 – jQuery remove parent element property without removing child
See the following example to removes the element’s parent and returns the unwrapped content:
<!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>