jquery Deletes a DOM node method _jquery

The example in this article describes the way jquery deletes a DOM node. Share to everyone for your reference. The specific analysis is as follows:

If an element in your document is superfluous, you should delete it. jquery provides two ways to delete a node, the Remove () and empty ().

The HTML DOM structure is as follows:

<p class= "nm_p" title= "Welcome to Cloud Communities" > Welcome to Cloud-Habitat </p>
<ul class= "Nm_ul" >
  <li title= ' PHP programming ' > Easy to understand PHP programming </li>
  <li title= ' C programming ' > Easy to understand C programming </li>
  <li title= ' JavaScript programming ' > Easy to understand JavaScript programming </li>
  <li title= ' jquery ' > Easy to understand jquery programming </li>
</ul>

Remove () method

The effect is to remove all matching elements from the DOM, and the incoming arguments are used to filter the elements based on the jquery expression.

For example, to delete the 2nd <li> element node in the <ul> node, the jquery code is as follows:

$ (". Nm_ul li:eq (1)"). Remove ();
After you get the second <li> element node, remove it from the Web page

After you run the code, the effect deletes the second node.

When a node is deleted with the Remove () method, all descendant nodes that the node contains will be deleted at the same time. The return value of this method is a reference to a node that has been deleted, so you can use the elements later. The following jquery code shows that the element can be used again after it has been removed with the Remove () method.

var $li = $ ("Nm_ul li:eq (1)"). Remove ();
After you get the second <li> element node, remove it from the Web page. 
$li. Appendto ("Nm_ul");
Add the deletion back to the <ul> element 
//So, delete is deleted from the Web page, in the jquery object, this element still exists, we can retrieve it again 

You can simplify the above code by using the attributes of the Appendto () method directly, and the jquery code is as follows:

$ ("Nm_ul li:eq (1)"). Appendto ("Nm_ul"); 
The Appendto () method can also be used to move 
an element//move element by first deleting the element from the document and then inserting the element into the specified node in the document

The Remove () method can also selectively delete elements by passing parameters, as shown in the jquery code:

Remove $ ("Nm_ul Li") from the <li> element in the <li> element title not equal to "pineapple"
. Remove ("li[title!=jquery]"); 

Empty () method

Strictly speaking, the empty () method is not to delete a node, but to empty the node, which clears all descendant nodes in the element. The jquery code is as follows:

$ ("Nm_ul li:eq (1)"). empty ();
After the second <li> element node is found, the contents of this element are emptied

When the code is run, the contents of the 2nd <li> element are emptied, leaving only the <li> label default symbol "."

I hope this article will help you with your jquery programming.