数据结构
网络
关系数据库管理系统
操作系统
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+ 浏览量
