Examples of jQuery element removal

For example:

The code is as follows:	Copy code
$ Li. off (). find ('. file-panel'). off (). end (). remove ();

I don't feel very good, so I decided to flip the jQuery source code as follows:

The code is as follows:

Copy code

// KeepData is for internal use only -- do not document Remove: function (selector, keepData) {// selector is the selector and keepData is the reserved data. Var elem, Elems = selector? JQuery. filter (selector, this): this, // filter her if there is a selector I = 0; For (; (Elem = elems [I])! = Null; I ++) {// traverses all arrays under the current selector If (! KeepData & elem. nodeType = 1) {// If you do not need to retain data, it must be an element JQuery. cleanData (getAll (elem); // you can clear all the data in a unified manner. getAll () is used to obtain all the sub-elements of the current element. Note that:         } If (elem. parentNode) {// she has a boss. If (keepData & jQuery. contains (elem. ownerDocument, elem) {// if you want to retain data SetGlobalEval (getAll (elem, "script"); // Save the js code, not very clear, without detailed analysis             } Elem. parentNode. removeChild (elem); // remove         }     } Return this; } Empty: function (){ Var elem, I = 0; For (; (Elem = this [I])! = Null; I ++) {// traverses all arrays under the current selector // Remove element nodes and prevent memory leaks If (elem. nodeType = 1) {// if it is an element JQuery. cleanData (getAll (elem, false); // clear all the following sub-data. Note that the getAll method does not return itself if the second parameter is false, that is to say, only the child data is deleted.         } // Remove any remaining nodes While (elem. firstChild ){ Elem. removeChild (elem. firstChild );         } // If this is a select, ensure that it displays empty (#12336) // Support: IE <9 If (elem. options & jQuery. nodeName (elem, "select ")){ Elem. options. length = 0;         }     } Return this; } Detach: function (selector ){ Return this. remove (selector, true ); }

Note: code snippets are taken from the jQuery-1.10.2, where the data includes the event cache, data cache
After reading the code, if you want to clear/remove an element, you only need $ (ele ). remove/empty (). You don't need to worry about comrade off. find something, because cleanData has solved the problem. Let's see ele in js framework design. innerHTML = ''; it is 20 times the removeChild, but we cannot do this with jQuery (unless your element contains no data, you can do this)
In contrast, setting HTML in .fn.html is more complex. The process is to determine whether various regular expressions are correct HTML structures, such as tbody and td, and try to correct her, the process of clearing the data (like empty) and writing the data into html is long.
Summary
1. If you want to delete the dom, directly: $ (dom). remove (); all events, cache-first-rate killing
2. To clear the dom and delete the data: $ (dom). empty ();
3. If you just change the simple html, you can use: $ (dom ). empty () [0 ). innerHTML = 'server'; of course, if you know that there is no data in it, you can directly use innerHTML. Of course, if it is a complex structure, we recommend that you use html ()
4. If you want to operate a large number of dom attributes, you can: var $ div = $ (dom ). remove (); nvidiv.css (). attr (). data (). appendTo (); delete from dom in advance, operate a lot of stuff before inserting, can relatively improve efficiency
5. Use detach if you only delete the dom and do not delete the data.