HTML 如何清除父级div内部的所有div的内容

在HTML中，div元素用于分组和排列其他HTML组件。它是网站开发中广泛使用的组件，包含在所有网站中。有时，清除父级div内每个子div元素的内容是必要的。

方法1：使用jQuery

使用jQuery是从父级div内部删除所有子div元素内容的最简单方法。一个广受欢迎的JavaScript库叫做jQuery可以简化HTML文档遍历、事件处理和动画操作。

步骤

使用CDN或本地下载，在HTML文档中包含jQuery库。
给父级div元素设置一个ID可以方便使用jQuery进行选择。
在包含要清除内容的父级div内添加div组件。
为了加入jQuery代码，向HTML文件中添加script元素。
写入jQuery代码在script元素中，并使用$(document).ready()函数等待文档加载完成。
使用 $(“#parentDiv”)在$ (document).ready()方法内选择父级div元素。
使用.find(“div”)来选择父级div内的每个div元素。
使用.empty()函数清空每个选择的div元素的内容。
保存HTML文档并在Web浏览器中打开，以查看清除后的div组件。

示例

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

方法-2：使用CSS

仅仅使用CSS无法清除div元素的内容。但是，您可以使用CSS将div元素的内容隐藏起来。以下是一个隐藏父div元素中子div元素内容的CSS代码示例。

步骤

使用适当的CSS选择器定位封装要隐藏的子div的父div元素。
为了仅针对父div的直接子级div元素，使用CSS选择器中的>选择器。将display: none;属性应用于选定的div>子组件。
最后，保存修改后的CSS代码并刷新网站以查看修改结果。

示例

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