如何清除一个父级div内的所有div的内容

如何清除一个父级div内的所有div的内容

给定一个包含div元素的HTML文档,任务是用jQuery删除现有的HTML元素。为了删除元素和它的内容,jQuery提供了两种方法。

  • remove()。它删除了被选中的元素及其子元素。
  • empty()。它从选定的元素中删除子元素。

示例:

<div id="Parent">
   <div id="child1">child 1</div>
   <div id="child2">child 2</div>
   <div id="child3">child 3</div>
</div>

语法:以下函数清除了父 “div”。

$('#parent').empty();

下面的函数清除了所有的子 “div”,但保留了父 “div “不变。

$('#parent div').empty()

示例:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
</head>
  
<body>
    <div id="parent">
        Parent div
        <div id="child1">Child 1</div>
        <div id="child2">Child 2</div>
        <div id="child3">Child 3</div>
    </div>
      
    <button onclick=myFunc()>Click me</button>
  
    <Script>
        function myFunc() {
            $('#parent div').empty()
        }
    </Script>
</body>
  
</html>

输出:

  • 在点击按钮之前。
    如何清除一个父级div内的所有div的内容?
  • 点击该按钮后。
    如何清除一个父级div内的所有div的内容?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程