Topics

jQuery Remove

Methods such as empty(), remove(), unwrap(), and so on, have been provided by jQuery provides to remove existing HTML contents or elements from the document.

jQuery empty() Method

Starting with the jQuery empty() method, which removes all child elements as well as other descendant elements coupled with the text content within the selected elements from the DOM.

Below is an example to show how you can remove all the content inside of the elements with the class ‘.container’ at the click of the button.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing the Contents of the Elements in jQuery</title>
<style>
.container{
    padding: 10px;
    background: #f0e68C;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Empty container div on button click
    $("button").click(function(){
       $(".container").empty();
    });
});
</script>
</head>
<body>
    <div 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">Empty Container</button>
    </div>
</body>
</html>

jQuery remove() Method

In this case, the jQuery remove() method removes all selected elements from the DOM and every other thing inside it. More so, all bound events and jQuery data associated with the elements are removed as well.

Below is an example that shows how you can remove all the <p> elements with the class .hint from the DOM on a button click. Also, nested elements inside these paragraphs will be removed, as well.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing the Elements from DOM in jQuery</title>
<style>
.container{
    padding: 10px;
    background: #f0e68C;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Removes paragraphs with class "hint" from DOM on button click
    $("button").click(function(){
       $("p.hint").remove();
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <p class="hint"><strong>Note:</strong> If you click the following button it will remove this paragraph.</p>
        <button type="button">Remove Hint Paragraph</button>
    </div>
</body>
</html>

The remove() method in jQuery can also include a selector as an optional parameter, that makes it possible for you to filter the elements to be removed. Take, for instance, the above example could be rewritten as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing the Elements from DOM in jQuery</title>
<style>
.container{
    padding: 10px;
    background: #f0e68C;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Removes paragraphs with class "hint" from DOM on button click
    $("button").click(function(){
       $("p").remove(".hint");
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <p class="hint"><strong>Note:</strong> If you click the following button it will remove this paragraph.</p>
        <button type="button">Remove Hint Paragraph</button>
    </div>
</body>
</html>

jQuery unwrap() Method

In this case, the jQuery unwrap() method removes the parent elements of all the selected elements from the DOM. This is basically the inverse of the wrap() method.

Below is an example that will show you how to remove the parent element of <p> elements on a button click.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing the Parents of the Elements from DOM in jQuery</title>
<style>
.container{
    padding: 10px;
    background: #f0e68C;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Removes the paragraph's parent element on button click
    $("button").click(function(){
       $("p").unwrap();
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <p class="hint"><strong>Note:</strong> If you click the following button it will remove the parent element of this paragraph.</p>
        <button type="button">Remove Paragraph's Parent</button>
    </div>
</body>
</html>

jQuery removeAttr() Method

finally, the jQuery removeAttr() method can be used to remove an attribute from the selected elements.

Below is an example that shows how you can remove the ‘href’ attribute from the <a> elements on a button click.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing an Attribute from the Elements in jQuery</title>
<style>
	a{
        font-size: 18px;
		margin-right: 20px;
	}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Removes the hyperlink's href attribute on button click
    $("button").click(function(){
        $("a").removeAttr("href");
    });
});
</script>
</head>
<body>
    <div class="container">
        <p>
			<a href="https://www.tutorialwithexample.com/">Home</a>
			<a href="https://www.tutorialwithexample.com/php">PHP Tutorial</a>
			<a href="https://readytocode.net/category/laravel/">Laravel Blog</a>
		</p>
        <button type="button">Remove Attribute</button>
    </div>
</body>
</html>