3.7 动态删除网页文本段落

在3.6节中介绍了动态创建新文本段落的方法，本节将介绍动态删除文本段落的方法。HTML DOM对象定义了一组remove()方法和removeChild()方法，可以用于动态删除各种元素节点。

下面给出一个JavaScript通过remove()方法和removeChild()动态删除文本段落（<p>标签元素）的代码实例。

关于【代码3-7】的说明：

● 第13～24行代码分别通过标签<div>定义3个层对象，并通过手动方式定义多个文本段落，最终显示成如图3.6中操作后的页面效果（大致方向就是将图3.6中的效果进行逆向操作）。

● 第30～34行代码定义的函数实现了动态删除文本段落的操作。其中，第32行代码通过childNodes属性获取了第一个层（<div id="id-div1"）中的全部段落<p>节点的集合（child_p），第33行代码通过removeChild()方法删除了该文本段落。注意，删除时必须使用数组下标的方式（child_p[0]），而直接删除集合（child_p）对象是无效的。

● 那么能不能直接删除集合（child_p）对象呢？第35～39行代码定义的函数实现了直接删除集合（child_p）对象的操作，不过这里要使用remove()方法来操作。

● 第40～46行代码定义的函数演示了常规删除多个文本段落的操作，主要就是通过for循环语句依次调用removeChild()方法来删除每一个文本段落。这里要特别注意的是，for循环语句迭代的方式从大到小，因为如果迭代顺序是从小到大，那么每次删除操作后集合（child_p）对象的数组下标就会发生改变，从而导致删除操作无法完成。