jQuery - difference .remove() vs .html('')

Question

Is there a difference between .remove() and .html("") in the following example? Where can I find the referring JS code ?

HTML

 <div class="wrap">
   <div class="content"> <div> ... </div></div>
 </div>

JS

$('.content').remove();

//vs

$('.wrap').html('');

Answer 1

"Basically" they to the same,

but actually (if you're picky about stuff) here's the difference:

$('.wrap').html('');
console.log( $('body').html() );  // see below

//  <div class="wrap"></div>

vs:

$('.content').remove();
console.log( $('body').html() ); // see below

//    <div class="wrap">
//
// </div>

so .remove() method removes the element, while using .html("") you're actually formatting the HTML Element to contain only an empty string.

Why .remove() has its good parts it's explained here: http://api.jquery.com/remove/

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead

so basically if you had some complicated stuff related to your elements you just removed, all your events, data, actions, references etc will be garbage collected and inaccessible leveraging memory and gain some performance. .detach()-ing them you don't need to reset i.e. event handlers for the same selectors you plan to include them again into the DOM at some point in the future.

Why is the above interesting (for it's mentioning the .empty()) is that what .html() method does, when a "string" is used as argument, it's looping trough all the element's selectors cleaning inner Nodes and data (to prevent memory leaks):

jQuery.cleanData(getAll(elem, false));
elem.innerHTML = value;

later on inside that loop you can see that if the value inclusion using innerHTML was successful it sets : elem = 0 // the innerHTML was successful!! YEY

so yep, it's using elem.innerHTML to assign the passed argument Value (if possible).

If still there's an elem to match (innerHTML was bad or trowed errors to catch), what it does is simply: this.empty().append( value );

so let's see what the heck the .empty() method does ^{(jQ source line 309)}

for ( ; (elem = this[i]) != null; i++ ) {        // Loops the selectors
    if ( elem.nodeType === 1 ) {                 // If it's an Element node 
      jQuery.cleanData( getAll( elem, false ) ); // Prevent memory leaks
      elem.textContent = "";                     // Remove any remaining nodes
                                                 // using the native textContent
                                                 // which is from jQ v2 I think.
    }
}

Now it's time to see what the dang does the .remove()^{jQ source line 359} :

remove: function (selector, keepData /* Internal Use Only */ ) {
    // the .detach() method uses keepData, but not we,
    // we're only using .remove() as a bound Method to our selector
    // so `elems>>>this` in the code below will be our fella.
    var elem,
    elems = selector ? jQuery.filter(selector, this) : this,
        i = 0;
    for (;
    (elem = elems[i]) != null; i++) {
        if (!keepData && elem.nodeType === 1) { // yes, no keepData!
            jQuery.cleanData(getAll(elem));     // remove all data stored
        }
        if (elem.parentNode) { // Yes, our element has a parentNode
            if (keepData && jQuery.contains(elem.ownerDocument, elem)) { //no..
                setGlobalEval(getAll(elem, "script")); // not our case...
            }
            elem.parentNode.removeChild(elem); // jQ data are removed now go with
                                               // the native way of doing things!
        }
    }
    return this; // (maintains Methods chainability...)
}

Answer 2

Is there a difference between .remove() and .html("") in the following example?

There's no significant difference, no, because in your example the only .wrap element contains the only .content element. That's only true because of the relationship of the elements.

In both cases, jQuery will ensure that any data and event handlers referenced by .content and its descendants (if any) is released, then remove the elements in question. If you're wondering about speed, the answer there is almost always it varies, so test on your target browsers if it matters, but this answer touches on the differences in speed between removing nodes and setting innerHTML (the answer surprised me).

Where can I find the referring JS code ?

In the jQuery source code.

---

Re your comment:

thx for the jQuery link, of course I had a look at the lib, but I cannot find where the .html() function is defined (sry, I'm new to js)

If you're new to JavaScript, I don't recommend you try to understand the jQuery source code yet — it's very complicated, and uses a lot of tricks to keep size down while having a lot of utility.

But I'll just note, because there's confusion on this point, that jQuery's html function doesn't just set innerHTML on the element in question. It does a lot more than that, to protect against memory leaks and release data that's no longer required. The gory details are in manipulation.js starting on line 407 at present (although of course that line number will change over time), but again, it's advanced stuff I wouldn't leap into early on in your JavaScript education.

Answer 3

yes, there is difference between both in your example.

.remove();

Use .remove() when you want to remove the element itself, as well as everything inside it. So in your case, only <div class="content"> <div> is removed from DOM. it will become:

<div class="wrap">
 ... </div></div>
</div>

.html('');

is used to set an element's content. in your case all divs inside .wrap are replaced by ''. it will become:

<div class="wrap"></div>