Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Clear all div’s Content Inside a Parent div ?
A div element in HTML is utilized to group and arrange other HTML components. It is a widely used component in website development and is included in all websites. Clearing the content of every child div element inside a parent div may occasionally be necessary.
Method −1: Using jQuery
Using jQuery is the simplest way to remove all content from child div elements inside a parent div. A well−liked JavaScript package called jQuery makes HTML document traversal, event−handling, and animation simple.
Algorithm
Using a CDN or downloading it locally, include the jQuery library in your HTML document.
Giving a parent div element an ID will make jQuery selection easier.
Inside the parent div that contains the material you wish to clear, add div components.
In order to incorporate jQuery code, include a script element in the HTML file.
Write jQuery code within the script element that uses the $(document).ready() function to wait for the document to be ready.
Using $("#parentDiv"), pick the parent div element inside the $(document).ready() method.
To pick every div element inside the parent div, use.find("div").
To empty the contents of each chosen div element, use the.empty() function.
To view the cleaned div components, save the HTML document and open it in a web browser.
Example
<!DOCTYPE html>
<html>
<head>
<title>Clearing Div Content</title>
<script>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
</script>
<!-- This will clear the div contents -->
<script>
$(document).ready(function() {
$("#parentDiv").find("div").empty();
});
</script>
<!-- Normal HTML Document -->
</head>
<body>
<div id="parentDiv">
<div>Tutorials Point - Content</div>
<div>The above content along with this content will be cleared.</div>
</div>
</body>
</html>
Method − 2: Using CSS
The content of a div element cannot be cleared using CSS alone. But you can use CSS to make the div> element's content invisible. Here is an example of CSS code that hides a div element's content inside of a parent div.
Algorithm
To locate the parent div element which encases the child divs you aim to obscure, employ an appropriate CSS selector.
To target only the direct descendant <div> elements of the parent <div>, utilize the > selector within the CSS selector. Apply the display: none; attribute to the selected div> child components.
Finally, conserve the modified CSS code and refresh the website to visualize the modifications.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- css code to clear up the div contents -->
<style>
# with < div {
display: none;
}
</style>
</head>
<body>
<!-- Normal HTML Document -->
<div id="parent_div">
<div>Tutorials Point - Div 1</div>
<div>Tutorials Point - Div 2</div>
<div>Tutorials Point - Div 3</div>
</div>
</body>
</html>
Conclusion
Using jQuery is the most straightforward and understandable strategy, especially for those who are already familiar with the library. However, it's possible such technique isn't the best, especially for bigger projects.
Another approach to clear the div content would be using Javascript. Although pure JavaScript requires a little more coding know−how, it is more efficient than jQuery. Additionally, it allows for more complex manipulations of the HTML components and is more versatile.
Utilizing CSS, which can only be used to hide child div> components with empty content, is the least versatile strategy of the three. However, it is a straightforward method that could be useful when simply the presentation of the material has to be altered.
268 Views
