jQuery Remove Elements & Attribute

Post by **C0D3D** »

jQuery remove the contents of the elements

Example 1

<!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 the HTML elements from the page

Example 2

Code: Select all

<!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>

jQuery remove the parent element of an HTML element from the page

Example 3

Code: Select all

<!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 remove an attribute from the HTML elements

Example 4

Code: Select all

<!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://codedskills.net">Home</a>
			<a href="https://codedskills.net/forum">forum</a>
			<a href="https://codedskills.net">Contact</a>
		</p>
        <button type="button">Remove Attribute</button>
    </div>
</body>
</html>

jQuery Remove Elements & Attribute

jQuery Remove Elements & Attribute

Who is online