remove()empty()remove() method is used to remove the selected elements out of the DOM. It removes the selected element itself, as well as everything inside it (including all texts and child nodes). The empty() method also removes the data from the selected elements.remove() method, It removes the selected elements and child elements.<!DOCTYPE html>
<html>
<head>
<title>jQuery remove() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#my_div").remove();
});
});
</script>
<style type="text/css">
.box{
height:120px;
width:300px;
border:1px solid #0099da;
background-color:#F90;
padding:10px;
color:#FFF;
font-size:18px;
font-weight:bold;
font-style:italic;
}
.btn{ padding:6px 15px;}
</style>
</head>
<body>
<button type="button" class="btn">Click Here!</button> <br /><br />
<div id="my_div" class="box">
Free Time Learning
<p>www.freetimelearning.com</p>
<p>www.freetimelearn.com</p>
</div>
</body>
</html>empty() method removes the child elements of the selected elements.<!DOCTYPE html>
<html>
<head>
<title>jQuery empty() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#my_div").empty();
});
});
</script>
<style type="text/css">
.box{
height:120px;
width:300px;
border:1px solid #0099da;
background-color:#F90;
padding:10px;
color:#FFF;
font-size:18px;
font-weight:bold;
font-style:italic;
}
.btn{ padding:6px 15px;}
</style>
</head>
<body>
<button type="button" class="btn">Click Here!</button> <br /><br />
<div id="my_div" class="box">
Free Time Learning
<p>www.freetimelearning.com</p>
<p>www.freetimelearn.com</p>
</div>
</body>
</html>The jQuery remove() method also accepts one parameter, which allows you to filter the elements to be removed.
The following jQuery remove() method example. It removes all <p> elements with class="testing" and class="filter_text" :
<!DOCTYPE html>
<html>
<head>
<title>Filter the Elements to be Removed</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my_btn").click(function(){
$("p").remove(".testing");
});
$("#my_btn_2").click(function(){
$("p").remove(".filter_text, .filter_text_2");
});
});
</script>
<style type="text/css">
.box{
height:120px;
width:300px;
border:1px solid #0099da;
background-color:#F90;
padding:10px;
color:#FFF;
font-size:18px;
font-weight:bold;
font-style:italic;
}
.btn{ padding:6px 15px;}
.filter_text{ font-size:20px; color:#6F0}
.filter_text_2 {font-size:26px; color:#FF0;}
</style>
</head>
<body>
<button type="button" id="my_btn" class="btn">Click Here!</button> <br /><br />
<div id="my_div" class="box">
Free Time Learning
<p>www.freetimelearning.com</p>
<p class="testing">www.freetimelearn.com</p>
</div><br />
<button type="button" id="my_btn_2" class="btn">Click Here!</button> <br /><br />
<div id="my_div" class="box">
Free Time Learning
<p class="filter_text">www.freetimelearning.com</p>
<p class="filter_text_2">www.freetimelearn.com</p>
</body>
</html>