如何清除父 div 内所有 div 的内容?

cssjqueryweb development更新于 2024/11/23 19:56:17

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

方法 1:使用 jQuery

使用 jQuery 是清除父 div 内所有子 div 元素内容的最简单方法。jQuery 是一个广受欢迎的 JavaScript 包，它简化了 HTML 文档遍历、事件处理和动画。

算法

使用 CDN 或本地下载，将 jQuery 库添加到您的 HTML 文档中。
为父 div 元素添加 ID 将使 jQuery 选择更容易。
在包含要清除内容的父 div 内，添加 div 组件。
为了合并 jQuery 代码，请在 HTML 文件中添加一个 script 元素。
在使用 $(document).ready() 函数等待文档准备就绪的 script 元素中编写 jQuery 代码。
使用 $("#parentDiv")，在 $(document).ready() 方法中选择父 div 元素。
要选择每个 div父 div 内的元素，请使用 .find("div")。
要清空每个选定 div 元素的内容，请使用 .empty() 函数。
要查看已清理的 div 组件，请保存 HTML 文档并在 Web 浏览器中打开。

示例

<!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> 元素的内容不可见。以下 CSS 代码示例将 div 元素的内容隐藏在父 div 中。

算法

要找到包含要隐藏的子 div 的父 div 元素，请使用合适的 CSS 选择器。
要仅定位父级 <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>