如何清除父 div 內所有 div 的內容？

HTML 中的 div 元素用於對其他 HTML 元件進行分組和排列。它是網站開發中廣泛使用的元件，包含在所有網站中。有時可能需要清除父 div 內每個子 div 元素的內容。

方法 -1：使用 jQuery

使用 jQuery 是從父 div 內的子 div 元素中刪除所有內容的最簡單方法。jQuery 是一個流行的 JavaScript 庫，它簡化了 HTML 文件遍歷、事件處理和動畫。

演算法

  • 在 HTML 文件中包含 jQuery 庫，方法是使用 CDN 或本地下載。

  • 為父 div 元素指定一個 ID，以便 jQuery 更容易選擇。

  • 在包含要清除內容的父 div 內新增 div 元件。

  • 在 HTML 檔案中包含一個 script 元素以包含 jQuery 程式碼。

  • 在 script 元素內編寫 jQuery 程式碼，使用 $(document).ready() 函式等待文件準備好。

  • 在 $(document).ready() 方法內使用 $("#parentDiv") 選擇父 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 元素。

  • 要僅定位父

    的直接後代
    元素，請在 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>

結論

對於那些已經熟悉該庫的人來說，使用 jQuery 是最簡單易懂的方法。但是，這種技術可能不是最好的，尤其是在大型專案中。

另一種清除 div 內容的方法是使用 Javascript。雖然純 JavaScript 需要稍微多一點的編碼知識，但它比 jQuery 更有效。此外，它允許更復雜地操作 HTML 元件，並且更通用。

使用 CSS（只能用於隱藏內容為空的子 div> 元件）是三種方法中最不靈活的方法。但是，它是一種簡單的方法，當只需要更改內容的顯示方式時，它可能很有用。

更新於： 2023年8月9日

473 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告