Unwrap () replaceWith()/unwrap() empty(

A,The $().empty()

Function:

Clears all child nodes and content of the selected element, including events and data

Note: This method does not remove the selected element itself or its attributes.

Source:

// line 6231 empty:function() {
      var elem,
        i = 0;
      for(; ( elem = this[ i ] ) ! = null; I++) {// if it is an element nodeif(elem. NodeType === 1) {// Prevent memory leaks // Empty contents and events to Prevent memory leaksfalse)); // Remove any remaining nodes // Clear all contents of the nodes""; }}return this;
    },
Copy the code

Simple implementation:

  $("#divTwo".empty() // equalsfunction customEmpty() {
    letElem, I = 0,array=[] //DOM node set, querySelectorAllforCircular writingfor(; (elem = this[i]) ! = null; I++) {// if it is an element node, empty all contents of that nodeif (elem.nodeType === 1) {
        //jQuery.cleanData( getAll( elem, false)); elem.textContent =""; }} // single DOM node, querySelectorif(this[i]===undefined){
      if (this.nodeType === 1) {
        //jQuery.cleanData( getAll( elem, false)); this.textContent =""; }}return this;
  }
  customEmpty.call(divTwo)
Copy the code

Second,The $().remove()

Function:

Removes the selected element itself, including all data, events, and child nodes.

Source:

// Remove the selected element, including all text and child nodes, does not keep a copy of the removed element.function( selector ) {
      return remove( this, selector );
    },
Copy the code

Resolution:

As you can see, the $().remove() method actually calls the big external remove() method, and only passes two arguments, this and selector

The third parameter is keepData, that is, whether to keep the events and data of the removed element. The default is false if no parameter is passed. The detach() method below is also called remove(), and the third parameter is passed true

    detach: function( selector ) {
      return remove( this, selector, true );
    },
Copy the code

1, the remove () :

$().remove() calls: selector, undefined, undefinedfunction remove( elem, selector, keepData ) {
    console.log(elem,selector,'elem6041'Var node, //remove() : nodes= target element //$()"p").remove("#pTwo") elem=$("p") selector=#pTwo
      nodes = selector ? jQuery.filter( selector, elem ) : elem,
      i = 0;
    console.log(nodes,'nodes6061')
    for(; ( node = nodes[ i ] ) ! = null; I++) {// if keepData is nottrue, and node is an element node, then data and events are clearedif(! keepData && node.nodeType === 1 ) { jQuery.cleanData( getAll( node ) ); } // removeChild is removed if the parent existsif ( node.parentNode ) {
        if ( keepData && jQuery.contains( node.ownerDocument, node ) ) {
          setGlobalEval( getAll( node, "script")); } node.parentNode.removeChild( node ); }}return elem;
  }
Copy the code

Resolution:

① Nodes are a set of nodes to be removed after processing ② Loop over nodes to remove events and data of Nodes [I] ③ Find the parent of Nodes [I] and call the native JS removeChild() method to remove nodes[I].

Simple implementation:

// No arguments ====== $("#divTwo"). The remove () / / is equivalent to / / jQuery cleanData (getAll (divTwo) divTwo. ParentNode. RemoveChild (divTwo)Copy the code

when$().remove()With parameters (e.g. :$("p").remove("#pTwo")), the jquery. filter(selector, elem) method is called

2,$The filter () :

Function:

$(“p”).remove(“#pTwo”) returns all elements that meet certain conditions, such as $(“p”)

Tags, id = ‘pTwo’ collection of element nodes, the filter () and invokes the jQuery. Find the matchesSelector () and jQuery. Find the matches () method, Both of these methods call the **Sizzle()** method, and the Sizzle() method calls select(). Select () is a bit more complicated than this article.

Source:

// return the element that meets the criteria."p").remove("#pTwo") expr=#pTwo elems=$("p")// source code 2925 line jquery.filter =function(expr, elems, not) {var elem = elems[0];if ( not ) {
      expr = ":not(" + expr + ")"; } // There is only one target element nodeif ( elems.length === 1 && elem.nodeType === 1 ) {
      returnjQuery.find.matchesSelector( elem, expr ) ? [ elem ] : []; } //elems p // jquery. grep, return an array that matches the conditions of the callback functionreturn jQuery.find.matches( expr, jQuery.grep( elems, function( elem ) {
      returnelem.nodeType === 1; })); };Copy the code

3,$.grep()

Function:

Returns an array that matches the criteria of the callback function

Source:

// Callback elems. NodeType ===1 //invert specifies whether to invert the filtering resultfalse
    grep: function( elems, callback, invert ) { var callbackInverse, matches = [], i = 0, length = elems.length, //2 callbackExpect = ! invert; //true
      // Go through the array, only saving the items
      // that pass the validator function// Save only elem (elem. NodeType ===1)for(; i < length; i++ ) { //falsecallbackInverse = ! callback( elems[ i ], i ); //false true
        if ( callbackInverse !== callbackExpect ) {
          matches.push( elems[ i ] );
        }
      }
      return matches;
    },
Copy the code

4. There are parametersThe $()A simple implementation of.remove() :

// with parameters ====== $("p").remove("#pTwo"/ / equivalent to / / jQuery. CleanData (getAll (divTwo) pTwo. ParentNode. RemoveChild (pTwo)Copy the code

Three,The $(). detach()

Function:

Removes the selected element itself, but preserves all data, events, and child nodes

Note: This method is useful in cases where deleted elements will be inserted into the DOM shortly

Source:

// Remove the selected element, including all text and child nodes, but keep copies of the removed element, allowing them to be reinserted later. // Notice the keepData:true
    detach: function( selector ) {
      return remove( this, selector, true );
    },
Copy the code

As you can see, the difference with $().remove() is that the third argument to this method passes true to the big remove() method, keepData

  functionRemove (elem, selector, keepData) {var node, //remove() without parameters, nodes= target element //$("p").remove("#pTwo") elem=$("p") selector=#pTwo
      nodes = selector ? jQuery.filter( selector, elem ) : elem,
      i = 0;
    for(; ( node = nodes[ i ] ) ! = null; I++) {// if keepData is nottrue, and node is an element node, then data and events are clearedif(! keepData && node.nodeType === 1 ) { jQuery.cleanData( getAll( node ) ); } // removeChild is removed if the parent existsif(node.parentNode) {//$. Contains: checks whether the specified element contains another element. That is, to determine whether another DOM element is a descendant of the specified DOM elementif(keepData && jquery. contains(node.ownerDocument, node)) {// mark all script tags as executedsetGlobalEval( getAll( node, "script") ) } node.parentNode.removeChild( node ); }}return elem;
  }
Copy the code

When keepData=true, jquery.cleandata (getAll(node)) is not executed, and setGlobalEval(getAll(node, “script”)) is executed.

Use:

// No arguments ====== // This method is useful in cases where deleted elements will soon be inserted into the DOMlet removeNodeOne=$("#divTwo"Detach () // with arguments ======let removeNodeTwo=$("p").detach("#pTwo")
Copy the code

GetAll (), jQuery. CleanData () (A little tired)

(after)