3.4 从页面中删除元素

从网页上删除节点也是日常工作中经常遇到的一种操作，jQuery提供了两个可以用来从DOM元素树中移除节点的方法，分别是：

● remove()方法 用来删除指定的DOM元素。它会将节点从DOM元素树中移除，但是会返回一个指向DOM元素的引用，因此并不是真正地将jQuery引用的元素对象删除，可以通过这个引用继续操作元素。

● empty()方法 该方法将不会删除节点，只是清空节点中的内容，DOM元素依然保持在DOM元素树中。

remove()方法会将元素从DOM对象树中移除，但是不会把引用这些对象的jQuery对象删除，因此还是可以使用jQuery对象进行操作。而empty是将元素中的内容清空。接下来创建一个名为dynamic_remove.html的网页，插入一些HTML元素，然后分别演示使用remove和empty的效果。

【示例3-4】dynamic_remove.html

        01    <body>
        02   <div id="idwelcome">演示使用remove和empty的方法<br/></div>
        03   <div id="idtip"><b>remove方法会从DOM树中移除节点</b><br/></div>
        04   <div id="idsenc"><b>empty方法只是清除元素的内容</b><br/></div>
        05    <div><input name="btnremove" type="button" id="btnremove" value="remove
    方法" />
        06    &nbsp;
        07   <input name="btnempty" type="button" id="btnempty" value="empty方法" />
        08    </div>
        09    </body>

可以看到，在body区使用了3个div用来显示消息，另外两个div中放置了两个按钮，分别用来调用remove方法和empty方法。这两个按钮的事件处理代码如下：

        01    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
        02    <script type="text/javascript">
        03       $(document).ready(function(e) {
        04        $("#btnremove").click(
        05              function(){
        06             var id1=$("#idtip").remove();    //移除DOM对象
        07             $("body").append(id1);         //重新添加已被移除的DOM对象
        08         });
        09        $("#btnempty").click(
        10              function(){
        11             var id1=$("#idsenc").empty();    //清除DOM对象
        12             //重新添加DOM对象的内容
        13             id1.append("这是重新添加的内容哦，原来的内容已被清除了！");
        14         });
        15    });
        16    </script>

Remove按钮内部调用了remove方法，尽管这个元素已经从DOM中移除了，不过jQuery仍然引用这个对象，因此可以将其再次添加到body中，使之经历删除又添加的过程。Empty只是清除DOM中的内容，重新向div中添加元素，单击两个按钮后的效果如图3.5所示。

图3.5 移除元素后的效果

上一章目录下一章