資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中清除父 div 內所有 div 的內容？
使用 JavaScript，我們將學習如何清除父 div 內所有 div 的內容。在 HTML 中，我們可以建立各種 <div> 元素，並將其他 <div> 元素作為父 div 的子元素新增。
此外，我們還可以向每個子 <div> 元素新增不同的 HTML。有時，我們可能需要清除所有子 <div> 元素的 HTML。因此，我們將學習清除父 div 內所有 div 內容的不同方法。
使用 HTML 元素的 innerHTML 屬性
每個 HTML 元素都包含 innerHTML 屬性。開發人員可以使用它來使用 JavaScript 設定任何元素的 HTML。我們可以訪問 JavaScript 中的元素，並將空字串作為 innerHTML 屬性的值分配給它，以清除父 div 內所有 div 元素的內容。
語法
使用者可以按照以下語法使用 innerHTML 屬性來清除父 div 內所有 div 的內容。
let parentElement = document.getElementById('parentElement');
parentElement.innerHTML = "";
在上述語法中，我們使用 id 訪問了 div 元素。
示例
在下面的示例中，我們建立了 id 為 'parentElement' 的 div 元素。此外，我們還添加了 4 個 div 作為父 div 的子 div，類名為 'childElement'。
在 JavaScript 中，我們透過其 id 訪問了父元素，使用了 innerHTML 屬性，並將空字串作為其值分配給它。
<html>
<body>
<h3>Using the <i>innerHTML property</i> to clear the content of all divs of the parent div element</h3>
<div id = "parentElement">
<div class = "childElement"> This is the child 1! </div>
<div class = "childElement"> This is the child 2! </div>
<div class = "childElement"> This is the child 3! </div>
<div class = "childElement"> This is the child 4! </div>
</div></br>
<button onclick = "clearParent()"> Clear the parent's content </button>
<script>
let parentElement = document.getElementById('parentElement');
function clearParent() {
parentElement.innerHTML = "";
}
</script>
</body>
</html>
在以上輸出中，使用者可以觀察到，當他們點選按鈕時，它會清除父 div 元素的所有 div 的內容。
使用 JQuery 的 empty() 方法
empty() 方法從父元素中刪除子元素。我們可以使用 jQuery 訪問 HTML 元素，並透過將其作為引用來呼叫 empty() 方法以清除其所有子元素。
語法
使用者可以按照以下語法使用 empty() 方法來清除所有子元素的內容。
$('#parentElement div').empty();
在上述語法中，parentElement 是父 div 的 id。
示例
在下面的示例中，我們使用了 jQuery。父 div 包含兩個子 div 元素。當用戶點選按鈕時，它會呼叫 clearContent() 函式。在 clearContent() 函式中，我們使用 jQuery 透過其 id 訪問了父元素，並呼叫了 empty() 方法。因此，當用戶點選按鈕時，它會刪除子 div 元素的內容。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
</head>
<body>
<h3>Using the <i>empty() method of JQuery</i> to clear the content of all divs of the parent div element </h3>
<div id = "parentElement">
<div class = "childElement"> This is the child 1! </div>
<div class = "childElement"> This is the child 2! </div>
</div></br>
<button onclick = "clearContent()"> Clear content </button>
<script>
function clearContent() {
$('#parentElement div').empty();
}
</script>
</body>
</html>
使用 jQuery 的 html() 方法
jQuery 中的 html() 方法與 JavaScript 中元素的 innerHTML 屬性相同。開發人員在使用 jQuery 時可以使用 html() 方法設定任何元素的 HTML。
html() 方法以字串格式獲取 html 作為引數。在這裡，我們將傳遞一個空字串以刪除父 div 所有子 div 的所有內容。
語法
使用者可以按照以下語法使用 jQuery 的 html() 方法。
$('#div-parent').html('');
在上述語法中，'div-parent' 是父元素的 id。
示例
在這個示例中，我們使用 jQuery 在按鈕上添加了 click 事件監聽器。當用戶點選按鈕時，它會呼叫回撥函式，該函式使用 html() 方法清除 div 元素的內容。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
</head>
<body>
<h3>Using the <i> html()</i> method of jQuery to clear content of all divs of parent div element</h3>
<div id = "div-parent">
<div> Hi Everyone! </div>
<div> Welcome to the TutorialsPoint to learn JavaScript! </div>
</div></br>
<button id = "btn"> Remove content </button>
<script>
$('#btn').click((event) => {
$('#div-parent').html('');
})
</script>
</body>
</html>
在本教程中，使用者學習了三種清除父 div 元素的所有 div 內容的方法。此外，使用者還可以使用 jQuery 的 text() 方法透過將空字串作為引數傳遞來刪除文字。
4K+ 瀏覽量
