如何用jQuery删除元素的内容

在这篇文章中，我们将讨论如何使用jQuery删除元素的内容。要删除元素的内容，我们将使用 empty() 方法。

jQuery empty()方法是用来删除所有的子节点和他们的内容，为选定的元素。这个方法不接受任何参数。

语法:

$(selector).empty()

方法：在这篇文章中，首先我们用.main类创建了一个包含另外两个div元素的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://code.jquery.com/jquery-3.5.1.min.js">
    </script>
      
    <style>
        .main {
            width: 450px;
            text-align: justify;
            font-size: 18px;
        }
  
        #GFG {
            padding: 5px 15px;
            margin-top: 20px;
        }
    </style>
  
    <script>
         $(document).ready(function() {$ ("#GFG").on('click', function() {
                $(".main").empty();
            })
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <h3>
            How to remove the contents of
            the elements using jQuery?
        </h3>
  
        <div class="main">
            <div class="section1">
                HTML stands for HyperText Markup 
                Language. It is used to design 
                web pages using a markup language. 
                HTML is the combination of 
                Hypertext and Markup language.
            </div>
  
            <div class="section2">
                Cascading Style Sheets, fondly 
                referred to as CSS, is a simply 
                designed language intended to 
                simplify the process of making 
                web pages.
            </div>
        </div>
  
        <input type="button" id="GFG" 
            value="Remove Contents">
    </center>
</body>
  
</html>

输出:

如何用jQuery删除元素的内容？