JQuery deletes a node by removing () detach () and empty ()

JQuery provides three methods to delete nodes: remove (), detach (), and empty ().

HTML code used for testing:
Copy codeThe Code is as follows:
<P title = "select your favorite fruit? "> What is your favorite fruit? </P>
<Ul>
<Li title = "apple"> Apple </li>
<Li title = "orange"> orange </li>
<Li title = "pineapple"> pineapple </li>
</Ul>

1. remove () method
Copy codeThe Code is as follows:
$ ("Ul li"). click (function (){
Alert(%(this%.html ());
});
Var $ li = $ ("ul li: eq (1)"). remove ();
$ Li. appendTo ("ul ");

When a node is deleted using the remove () method, all child nodes contained in the node will be deleted at the same time. The return value of this method is a reference pointing to the deleted node. Therefore, these elements can be used later.

2. detach () method
Copy codeThe Code is as follows:
Var $ li = $ ("ul li: eq (1)"). detach ();
$ Li. appendTo ("ul ");

Like detach (), detach () removes all matching elements from the DOM. However, it should be noted that this method will not delete the matched elements from the jQuery object, so these matching elements can be used in the future. Unlike remove (), all bound events and additional data are retained.

3. empty () method
Copy codeThe Code is as follows:
Var $ li = $ ("ul li: eq (1)"). empty ();
$ Li. appendTo ("ul ");

Strictly speaking, the empty () method does not delete nodes, but clears nodes. It can clear all child nodes in the element.