前端技术文档和网站数据接口使用指南详情
网站开发中有关html、css、js等前端技术文档和易助科技网网站数据接口使用文档及相关资料下载!

JQuery删除Html元素之:remove() , empty()和detach()方法

来源:易助科技网浏览量:17收藏

remove(),empty()和detach()方法简介



1)remove()方法:


使用该方法可以在Html DOM中删除当前选择的元素及期该元素下的所有子元素全部删除。该方法的语法如下:


$(select).remove([select])


其中,selector表示要删除的元素,可以是一个jQuery对象,也可以是一个选择器;如果不指定selector参数,则会删除当前所有选中的元素。

remove方法可以与其他jQuery方法组合使用,比如,我们可以使用find()方法查找某个元素的子元素,使用remove()方法删除它们:


$('div').find('a').remove()


这样,就会删除所有div元素下的span元素。

remove()方法还可以接受一个参数,即要删除的元素的选择器:


$('div').remove('#ID')


这样,就会删除所有div元素下 id 为 ID 的元素。



2) empty()方法:


使用该方法可以在Html DOM中将当前所选元素的子元素删除掉(不删除自身)


$('div').empty(); //清空所有div元素内的内容


在页面中,如果需要频繁地增加或删除元素中的子元素,建议使用empty()方法来清空元素中的内容,然后再添加需要的内容。这样做可以有效地减少页面的重绘次数,提高页面的性能。


$('table tbody').empty(); //清空表格中的内容
for (var i = 0; i < data.length; i++) {
  $('table tbody').append('<tr><td>' + data[i][0] + '</td><td>' + data[i][1] + '</td><td>' + data[i][2] + '</td></tr>');
}



3)detach()方法:


detach()方法是一个更加灵活的DOM操作方法,它可以将元素及其所有的数据和事件处理程序从页面中彻底删除,但是可以保留被删除元素的数据和事件处理程序,方便后续再次使用。

与之相比,empty()方法只是清空元素中的内容,不会删除元素及其数据和事件处理程序。因此,如果需要保留元素的数据和事件处理程序,应该使用detach()方法。


//将div元素及其所有的数据和事件处理程序从页面中彻底删除,但是可以保留被删除元素的数据和事件处理程序,存储在obj变量中
var obj = $('div').detach();