The three methods of jQuery deleting nodes are remove()detach() and empty()_jquery

jQuery provides three methods to delete nodes, namely remove(), detach() and empty().

HTML code used for testing:

Copy code The code is as follows:

< ;p title="Choose your favorite fruit?">What is your favorite fruit?

• Apple


• Orange


• pineapple

1. remove() method

Copy code The 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 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.

2. detach() method

Copy code The code is as follows:

var $li = $("ul li:eq(1)").detach();
$li.appendTo("ul");

detach() and remove() Likewise, all matching elements are removed from the DOM. But it should be noted that 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 and additional data will be retained.

3. empty() method

Copy code The code is as follows:

var $li = $("ul li:eq(1)").empty();
$li.appendTo("ul");

Strictly speaking, empty() The method is not to delete the node, but to clear the node, which can clear all descendant nodes in the element.