jQuery - 区别 .remove() 与 .html('')

Question

以下示例中的 .remove() 和 .html("") 有区别吗？ 在哪里可以找到引用的 JS 代码？

HTML

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

JS

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

//vs

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

Answer 1

下面例子中的.remove()和.html("")有区别吗？

没有显着差异，不，因为在您的示例中，唯一的 .wrap 元素包含唯一的 .content 元素。由于元素之间的关系，这仅是正确的。

在这两种情况下，jQuery 将确保释放 .content 及其后代（如果有）引用的任何数据和事件处理程序，然后删除有问题的元素。如果您对速度有疑问，答案几乎总是各不相同，因此请在您的目标浏览器上进行测试，但this answer 谈到了两者之间的差异删除节点和设置 innerHTML 之间的速度（答案让我感到惊讶）。

在哪里可以找到引用的 JS 代码？

在jQuery source code.

---

你的评论：

感谢 jQuery 链接，当然我查看了 lib，但我找不到 .html() 函数的定义位置（抱歉，我是 js 新手）

如果您是 JavaScript 新手，我不建议您尝试理解 jQuery 源代码——它非常复杂，并且使用了很多技巧来减小大小，同时拥有非常实用。

但我要注意，因为在这一点上存在混淆，jQuery 的 html 函数 不 只是在有问题的元素上设置 innerHTML。它的作用远不止于此，以防止内存泄漏和释放不再需要的数据。血淋淋的细节目前是in manipulation.js starting on line 407（当然，行号会随着时间而改变），但同样，我不会在你早期的 JavaScript 教育中涉足这些高级内容。

Answer 2

是的，在您的示例中两者之间存在差异。

.remove();

当您想删除元素本身以及其中的所有内容时，请使用 .remove()。因此，在您的情况下，只有 <div class="content"> <div> 会从 DOM 中删除。它会变成：

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

.html('');

用于设置元素的内容。在您的情况下，.wrap 中的所有 divs 都将替换为 ''。它会变成：

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

Answer 3

“基本上”他们是一样的，

但实际上（如果你对东西很挑剔的话）这里有区别：

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

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

对比：

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

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

所以.remove() 方法会删除元素，而使用.html("") 您实际上是在将HTML Element 格式化为仅包含一个空字符串。

为什么.remove() 有它的优点在这里解释：http://api.jquery.com/remove/

与 .empty() 类似，.remove() 方法将元素从 DOM 中取出。当您想要删除元素本身以及其中的所有内容时，请使用 .remove()。除了元素本身，所有与元素关联的绑定事件和 jQuery 数据都将被删除。要删除元素而不删除数据和事件，请改用 .detach()

所以基本上，如果您有一些与刚刚删除的元素相关的复杂内容，那么您的所有事件、数据、操作、引用等都将被垃圾收集，并且无法利用内存访问并获得一些性能。 .detach()-ing 他们你不需要重置，即你计划在未来某个时候将它们再次包含到 DOM 中的相同选择器的事件处理程序。

为什么上述有趣（因为它提到了.empty()）是.html()method does，当"string"用作参数时，它循环通过所有元素的选择器清理内部节点和数据（ 为了防止内存泄漏）：

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

稍后在该循环中，您可以看到如果使用 innerHTML 的值包含成功，它会设置：elem = 0 // the innerHTML was successful!! YEY

是的，它使用elem.innerHTML 来分配传递的参数值（如果可能）。

如果仍然有一个 elem 匹配（innerHTML 是错误的或捕获的错误），它的作用很简单：this.empty().append( value );

那么让我们看看.empty() 方法到底做了什么^{(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.
    }
}

现在是时候看看 .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...)
}