接着，我们来看下替换／删除现有节点的方法吧。下面是点击书名列表，显示相应的书籍封面的例子。如果点击[删除]按钮，就会隐藏封面图片。
●清单6-32 replace.html（上）／replace.js（下）
自学PHP 第3版
Java口袋参考手册
Swift口袋参考手册
自学ASP.NET 第5版
制作应用吧！Android入门
"删除"
// 点击<ul id="list">的子元素（链接）时的处理
// 根据data-isbn属性获取锚标签中的isbn值
（e.target请参考6.7.2）
// 执行没有获取到isbn值时的处理
// 生成
<img>元素
// 判断<div>元素中是否存在<img>元素（图片是否正在显示中）
//<img>元素存在时，替换为新的<img>元素
//<img>元素不存在时，新增元素并使[删除]按钮有效
// 点击[删除]按钮时的处理
// 删除<div id="pic">中的子元素，使[删除]按钮无效
JavaScript完全学习教程
自学PHP 第3版
Java口袋参考手册
Swift口袋参考手册
自学ASP.NET 第5版
制作应用吧！Android入门
删除
●点击链接列表，显示相应的图片
代码的大致流程请参考代码内的注释。这里只关注节点的替换／删除的部分。
①替换节点
replaceChild方法的功能是替换子节点。
●语法 replaceChild方法
elem：元素对象
after：替换后的节点
before：目标替换节点
在清单6-32中，将新建的<img>元素设为替换后的节点，将<div id="pic">中的<img>元素设为目标替换节点。
请注意，目标替换节点必须是当前节点的子节点。如果设为子节点之外的节点则会出错。
另外，在这个例子中，使用firstChild属性获取来<div>元素的第一个子节点，但是因为<div>元素中只有1个子节点，所以使用lastChild属性结果也是相同的。
②删除节点
removeChild的功能是删除子节点。
●语法 removeChild方法
elem：元素对象
node：删除目标的节点
在清单6-32中，将<div id="pic">中的<img>元素设为了删除目标节点。
和replaceChild方法相同，删除目标节点，必须是当前节点的子节点。
虽然在这个例子中是使用lastChild属性来获取子节点的，但和之前的同理，改用firstChild属性结果也是相同的。
Note 删除属性节点 -removeAttribute方法-
正如6.5.2中所接触的，属性不是元素的「子」节点。因此，删除属性时，不是使用removeChild方法，而是需要使用专用的removeAttribute方法。写法如下。
元素对象.removeAttribute(属性名);■可以自由设定的data-xxxxx属性是什么？
data-xxxxx属性是可以根据应用开发者的目的自由设定的特殊的值（③）。突然说是「自由地」可能会感到不解，但把它看作是「主要用来嵌入在脚本（事件监听器）中使用的参数的属性」就很好理解了。
在这个例子中，为了表示用来识别书籍的isbn值，给每个锚标签设定了data-isbn属性。像这样，将可变信息（参数）和功能（事件监听器）分开，可以使代码更容易重复使用。
HTML文件
点击项目的isbn值是「978-4-7981-3547-2」 JavaScript文件
...中间省略...
...中间省略...
使用data-xxxxx属性，可以自由地给脚本传参
●使用data-xxxx属性给事件监听器传递参数
「xxxxx」部分可以使用小写字母、连字符、下划线等字符自由命名。也称为自定义数据属性。
Note void运算符
请注意清单6-32的③中的锚标签的href属性。使用JavaScript伪协议（2.1.2）调用「void(0)」，是为了阻止锚标签原本的动作（链接）。void运算符（2.4.6）是表示什么都不返回的运算符，所以经常用于像「虽然以链接形式表示文本，但是将其处理交给脚本」（=不让其作为链接来运行）这样的场景。