jQuery DOM deletion node operation guide_jquery

The following example may use the following HTML code:

Copy code The code is as follows:

• Apple


• Banana


• Orange


• Grapes


• Strawberry

1. remove() method:

Function: Remove all matching elements from the DOM. The passed parameters are used to filter elements based on jQuery expressions.

For example, to delete the second

element node in the

node in the above picture, the jQuery code is as follows:
Copy code The code is as follows:

$(document).ready(function() {
$("ul li:eq(1)").remove();
});


When a node is deleted using the remove() method, all descendant nodes contained in the node will be deleted at the same time. The return value of this method is a reference to the deleted node, so the elements can be used again later. The following jQuery code shows that after the element is deleted using the remove() method, it can still be used.

Copy code The code is as follows:

var $li=$("ul li:eq(1)").remove();
$li.appendTo("ul"); //Re-add the deleted node to the
element


You can directly use the features of the appendTo() method to simplify the above code:

Copy code The code is as follows:

$("ul li:eq(1)").appendTo("ul");//The appendTo() method can also be used to move elements. When moving an element, first delete the element from the document, and then insert the element into The specified node in the document.


In addition, the remove() method can also selectively delete elements by passing parameters:

Copy code The code is as follows:

$("ul li").remove("li[title='t1']");


2. detach() method:

Detach(), like remove(), also removes all matching elements from the DOM. However, it should be noted that this method will not remove the matching elements from the jQuery object, thus making it possible to reuse these matching elements in the future. Different from remove(), all bound events, attachment data, etc. will be retained.

Through the following example, you can know the difference between it and the remove() method:

Copy code The code is as follows:

$("ul li").click(function(){
alert($(this).html());
})
var $li=$("ul li:eq(1)").detach(); //Delete element
$li.appendTo("ul"); //Re-append this element and find that the event it was bound to before is still there. If you use the remove() method to delete the element, the event it bound before will be invalid;


3. 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.

Copy code The code is as follows:

$("ul li:eq(1)").empty();//After obtaining the second
element node, clear the content in this element. Note that it is in the element.


The result after running is:



When the code is run, the content of the second

• element is cleared, leaving only the default symbol "." of the
• element.

  The above is all the content described in this article, I hope you all like it.