jQuery Remove Elements, Easy To Learn jQuery Remove Elements

jQuery Tutorial

jQuery Remove Elements

jQuery it is easy to remove existing HTML elements or contents from the document.

Remove Elements/Content

The jQuery remove elements are mainly two methods :

remove()
empty()

The jQuery 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.

Syntax :

$(selector).remove(selector)

jQuery remove() Method

The jQuery 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>

Output :

jQuery empty() Method

The jQuery 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>

Output :

Filter the Elements to be Removed

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>

Output :

jQuery Tutorial