第一百二十章 移除元素

上一章学习了如何在文档中添加元素或者内容。现在要反过来,把文档中的元素或者内容进行移除。

如果只是简单的移除元素,remove 方法就可以了,选中谁就把谁删掉,比打个响指还要爽快。

$('p').remove()

这样就把页面中的所有段落都给删除掉了。

但这有些过于粗暴,其实就是这种方法并不能够(方便的)解决我们所有的问题,所以我们还有一些别的办法。

$('p').empty()

大家知道 empty 是“空”的意思,这里是让我们所选择的元素变空。元素本身还在那里,但是元素里边的内容全部被删掉了。和下边的方法也没什么区别:

$('p').html('')

这样说似乎并不严谨,因为如果这两个方法真的彻底一样,那就没有必要再去为了这样一个极其简单的事情,特别搞出一个新的方法来。

所以,应该说这两种方法在执行之后的最终结果上,是效果一致的,都是将元素中的内容彻底删除掉了。但是,html 方法明显可以做更多的事情,而 empty 则只专注于这一件事情。我们要相信专业,所以在这件事情上,一定是 empty 做得更好一些。那究竟好在哪里呢?——它的执行效率要更高。虽然这可能要面对大量元素操作的时候才会明显。

有些方法的存在总让我们觉得和某些内容重复了,但是它存在必然有它存在的意义。而对于其他可以相互替代的情况,好多确实在效果上是可以相互替代的,但是在效率上是会有区别的。

还有一个方法,我们用到的并不多。其实呢,就是因为许多方法之间可以相互替代(在最终效果上),导致很多人学了一些基本的方法,就没有再深入的去了解。这些很基础的东西确实能够解决大部分的问题了,但是效率呢?有些事情可能已经有了现成的方法去解决,但是他不知道呀,他不知道也不问呀,他也没有想起来去查询呀,当然去查询可能也没有(很少)中文资料呀……于是就用自己已知的,很基础的方法去变相解决这个问题,然后绕了好多弯路。咳咳,说正事:

$('p').unwrap()

如果我们认为 empty 是去瓤,那么 unwarp 就是去皮。是把这个元素的父元素删除掉,但只是删除父元素,而不影响这个父元素中的内容。

或者说,它是 warp 和 warpAll 的逆向操作。思考一下, warp 和 warpAll 虽然是两种方法,但是它们的逆向操作是一样的,都是去除当前元素的父元素。反之,这两种方法都是给选中的元素添加父元素,区别只是怎么添加。

关于元素的增减,差不多就是这些内容,没有什么难度,只是需要我来告诉你们一下,有这些方法而已。

现在了解了这些,并不等于已经学会了,我们还要思考和练习,才能够把这些知识变成自己的。比如我问你:warpAll 是给所有选中元素的外面去套一个父元素,那如果我选中的这些元素,它们不在同一个层级呢,又会发生怎样的情况?

知道有这个东西,和理解它是怎样的,是两码事。去思考,给自己提出问题,然后自己去验证这些问题。如果只是局限于我所讲的这一点点东东,那肯定是学不会什么的,因为我怕吓到你们而故意没有多讲呀。(偷笑,老鼠摸鱼的好借口,计划通!

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百二十章 移除元素

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏