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>