JavaScript 如何清除父 div 内的所有 div 的内容
使用JavaScript,我们将学习如何清除父级div内的所有div内容。在HTML中,我们可以创建各种 <div>
元素,并添加其他 <div>
元素作为父div的一个子元素。
此外,我们还可以为每个子元素添加不同的HTML
<
div>元素添加不同的HTML。有时,我们可能需要清除所有子元素的HTML <div>
元素。因此,我们将学习不同的方法来清除父元素内的所有div的内容。
使用HTML元素的innerHTML属性
每个HTML元素都包含innerHTML属性。开发人员可以使用它来为任何元素设置HTML,使用JavaScript。我们可以在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()方法。因此,当用户点击该按钮时,它将删除子元素的内容。
<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在按钮上添加了点击事件监听器。当用户点击按钮时,它将调用回调函数,该函数使用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()方法,通过传递空字符串作为参数来删除文本。