The difference between empty and remove in DOM node deletion-JS Tutorial-php.cn

The difference between empty and remove in DOM node deletion

一个新手

Release： 2017-09-29 10:04:01

Original

1980 people have browsed it

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 and remove methods

empty As the name suggests, empty method, but it is a little different from delete, 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. Please look at the following HTML:

<p class="hello"><p>这是p标签</p></p>

Copy after login

If we remove all elements of p inside via empty method, it just clears the inner html code, but the markup still remains in the DOM

//通过empty处理
$(&#39;.hello&#39;).empty()
//结果：<p>这是p标签</p>被移除<p class="hello"></p>

Copy after login

通过empty移除了当前p元素下的所有p元素，但是本身id=test的p元素没有被删除

Copy after login

<!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>
    p {
        background: #bbffaa;
        width: 300px;
    }
    </style></head><body>
    <h2>通过empty移除元素</h2>
    <p id="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </p>
    <button>点击通过jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on(&#39;click&#39;, function() {        //通过empty移除了当前p元素下的所有p元素
        //但是本身id=test的p元素没有被删除        $("#test").empty()
    })    </script></body></html>

Copy after login

remove is the same as empty, both are ways to remove elements, but remove will remove the element itself, and also Everything inside the element will be removed, including bound events and jQuery data related to the element.

For example, for a node, bind a click event

<p class="hello"><p>这是P段落</p></p>$(&#39;.hello&#39;).on("click",fn)

Copy after login

It is actually very simple to delete this node without using the remove method, but at the same time, the event needs to be destroyed. Removed, this is to prevent "memory leaks", so front-end developers must pay attention to how many events are tied, and remember to destroy it when not in use

Remove p and all its internal elements through the remove method, remove The event destruction method will be automatically operated internally, so it is very simple to use

//通过remove处理
$(&#39;.hello&#39;).remove()
//结果：<p class="hello"><p>这是P段落</p></p> 全部被移除 //节点不存在了,同事事件也会被销毁

Copy after login

remove expression parameters:

remove is easier to use than empty. Pass a selector expression to filter the set of matching elements that will be removed. You can selectively delete the specified node

We can select a group of the same elements through $(), and then use remove() Pass the filtering rules to process

<!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>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style></head><body>
    <h2>通过jQuery remove方法移除元素</h2>
    <p class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </p>
    <p class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </p>
    <button>通过点击jQuery的empty移除元素</button>
    <button>通过点击jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on(&#39;click&#39;, function() {        //删除整个 class=test1的p节点        $(".test1").remove()
    })

    $("button:last").on(&#39;click&#39;, function() {        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理        $("p").remove(":contains(&#39;3&#39;)")
    })    </script></body></html>

Copy after login

When you want to remove the specified element, jQuery provides two methods: empty() and remove([expr]) , both delete elements, but there are still differences between the two:

When it is necessary to remove the specified element, jQuery provides two methods, empty() and remove([expr]), two Both delete elements, but there are still differences between the two

empty method

Strictly speaking, the empty() method does not delete the node, but clears the node. Can clear all descendant nodes in the element
empty cannot delete its own node

remove method

This node and all descendant nodes contained in this node will be deleted at the same time
Provides a filtering expression to be passed to delete elements in the specified collection

The above is the difference between the two. Let’s deepen our understanding through the code part on the right.

<!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>
    .left,
    .right {
        width: 300px;
    }
    
    .left p,
    .right p {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left p {
        background: #bbffaa;
    }
    
    .right p {
        background: yellow;
    }
    </style></head><body>
    <h2>通过empty与remove移除元素</h2>
    <p class="left">
        <button id="bt1">点击通过jQuery的empty移除内部P元素</button>
        <button id="bt2">点击通过jQuery的remove移除整个节点</button>
    </p>
    <p class="right">
        <p id="test1">
            <p>p元素1</p>
            <p>p元素2</p>
        </p>
        <p id="test2">
            <p>p元素3</p>
            <p>p元素4</p>
        </p>
    </p>
    <script type="text/javascript">
    $("#bt1").on(&#39;click&#39;, function() {        //删除了2个p元素，但是本着没有删除         $("#test1").empty()
    })

    $("#bt2").on(&#39;click&#39;, function() {        //删除整个节点        $("#test2").remove()
    })    </script></body></html>

Copy after login

The above is the detailed content of The difference between empty and remove in DOM node deletion. For more information, please follow other related articles on the PHP Chinese website!