Home > Article > Web Front-end > What are the methods to delete nodes in jquery?

What are the methods to delete nodes in jquery?

伊谢尔伦Original: 2017-06-17 13:33:471905browse

1NodeDelete Basic usage of empty()

Removing nodes on the page is a common operation for developers, jQuerySeveral different methods are provided to deal with this problem. Here we take a closer look at the empty method

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

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 the element is regarded as a child node of the element. Please look at the following HTML:

<p class="hello"><p>php.cn</p></p>

If we remove all elements of p inside through the empty method, it only clears the internal html code, but the mark still remains in the DOM

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

For reference Code area on the right:

removes all p elements under the current p element through empty But the p element with id=test has not been deleted

<!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>

2. Node deletion of remove() with and without parameters

remove Like empty, they are both methods for removing elements, but remove will remove the element itself and everything inside the element, including bound events and jQuery data related to the element.

For example, for a node, bind a click event

<p class="hello"><p>php.cn</p></p>
$('.hello').on("click",fn)

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. This is to prevent "memory leaks" ", so front-end developers must pay attention to how many events are tied and remember to destroy them when not in use

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

//通过remove处理
$('.hello').remove()
//结果：<p class="hello"><p>php.cn</p></p> 全部被移除
//节点不存在了,同事事件也会被销毁

removeExpressionParameters:

The advantage of remove than empty is that you can pass a selector expression to filter the items that will be moved. Except the set of matching elements, you can selectively delete the specified nodes

We can select a group of the same elements through $(), and then pass the filtering rules through remove(), thus processing

Comparing the code area on the right, we can process it like this

$("p").filter(":contains(&#39;3&#39;)").remove()

3. The difference between empty and remove when deleting nodes

To remove the specified element When , jQuery provides two methods, empty() and remove([expr]), both of which delete elements, but there are still differences between them

empty method

Strictly speaking , the empty() method does not delete the node, but clears the node. It 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 filter expression to be passed to delete elements in the specified collection

4. Node deletion Deletion operation of retaining data detach()

If we want to temporarily delete the node on the page, but do not want the data and events on the node to be lost, and can let the deleted node be used in the next time period Displayed on the page, you can use the detach method to process it.

detach is easy to understand literally. Let a web element be hosted. That is, the element is removed from the current page, but the memory model object of this element is retained.

Let’s take a look at the explanation from jquery official documentation:

This method will not delete the matching elements from the jQuery object, so these matching elements can be used again in the future. Unlike remove(), all bound events, attached data, etc. will be retained. The sentence $("p").detach() will remove the object, but the display effect will be gone. But it still exists in memory. When you append, you return to the document flow. It showed up again.

Of course, special attention should be paid here. The detach method is unique to JQuery, so it can only process events or data bound through JQuery methods.

Detach all events through $("p").detach() After deleting the P element, put the deleted p element on the page through append. By clicking on the text, you can prove that the event is not lost

5. The difference between detach() and remove() for node deletion

JQuery is a very powerful tool library. In work development, some methods are ignored by us because they are not commonly used or have not been noticed.

remove() and detach() may be one of them. Maybe we use remove() more, but detach() may be less used.

remove: remove node

Without parameters, remove the entire node and all nodes inside the node, including events and data on the node

With parameters, remove the filtered node and all nodes inside the node All nodes, including events and data on the node

detach: remove node

The processing of removal is consistent with remove

Different from remove(), all bindings The events, additional data, etc. will be retained

For example: $("p").detach() will remove the object, but the display effect will be gone. But it still exists in memory. When you append, you return to the document flow. It showed up again.

The above is the detailed content of What are the methods to delete nodes in jquery?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How does jQuery get and calculate the length of an object?Next article：How does jQuery get and calculate the length of an object?

See more

What are the methods to delete nodes in jquery?

Related articles