jQuery 提供了几个方法可以很容易去移除选择的页面上的元素 … .empty() 可以清空所选元素里面的所有的子元素 … .remove() 和 .detach() 可以移除整个所选择的元素 …

这两个方法的功能是一样的，只不过有点小小的区别，就是用 .detach() 方法移除元素以后，可以保留附加在这些被移除的元素上的 jQuery 数据 … 比如绑定在元素上的事件 …

测试

下面我们去试一下这些方法 .. 先试一下 .empty() … 比如我们要清空 h6 元素里的东西 … h6 元素里只有文本 … 文本在文档结构里也是一种节点类型 …

$( '.album h6' ).empty();

选中所有的 h6 … 然后调用 .empty() 方法 … 现在它里面的文字已经不见了 … 打开 Elements 选项卡 …

h6 这个元素仍然存在，不过它里面的文字已经不在了 … 想要完全移除元素，也可以使用 .remove() 或者 .detach() …

比如我们要从页面上移除所有的图像元素 …

$( '.album img' ).remove();

现在图像已经不在页面上显示了 … 再到 Elements 里去看一下 …

原来在 .album 类里面的 img 元素 … 都已经使用 .remove() 方法移除掉了 …