Basic usage of empty() for DOM node deletion

Removing nodes on the page is a common operation for developers. jQuery provides several different methods to deal with this problem. Here we take a closer look at the empty method

empty As the name suggests, the empty method. But it is a little different from deletion, because it only removes all child nodes in the specified element.

This method not only removes child elements (and other descendant elements), but also removes the text within the element. Because, according to the description, any text string in an element is regarded as a child node of the element.

Let’s write an example analysis:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    div {
        background: #bbffaa;
        width: 300px;
    }
    </style>
</head>

<body>
    <div id="div">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on('click', function() {
        //通过empty移除了当前div元素下的所有p元素
        //但是本身id=test的div元素没有被删除
        $("#div").empty()
    })
    </script>
</body>

</html>

Use a browser to open and run this code, press F12 You can see that the following <div id="div">< ;/div>not deleted

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> div { background: #bbffaa; width: 300px; } </style> </head> <body> <div id="div"> <p>p元素1</p> <p>p元素2</p> </div> <button>点击通过jQuery的empty移除元素</button> <script type="text/javascript"> $("button").on('click', function() { //通过empty移除了当前div元素下的所有p元素 //但是本身id=test的div元素没有被删除 $("#div").empty() }) </script> </body> </html>

submit Reset Code

Automatic operation

Basic usage of empty() for DOM node deletion

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]