第二十四篇 jQuery 学习6 删除元素

来源：互联网发布：seo代码优化编辑：程序博客网时间：2024/06/09 18:44

jQuery 学习6 删除元素

上节课我们做了添加元素，模拟的是楼主发的文章，路人评论，那么同学们这节课学了删除之后，去之前的代码上添加一个删除，模拟一个楼主删除路人的评论。

jQuery的删除方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

以上引用w3c教程

为了同学们更好的扩展，老师就不在上节课的基础上模拟删除，而是写出删除的功能代码和注意事项，同学们就自己多尝试，来瞧瞧代码先：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>jQuery 学习6 删除元素</title>    <!--使用jQuery一定不要忘记引用jQuery文件-->    <script src="../js/jquery-1.12.2.min.js"></script></head><body><div class="div">    我是第一个div元素    <span>第一个div里面的span元素</span></div><div>    我是第二个div哟    <b>第二个div下面的b元素</b>    <span>第二个div下面的span元素</span></div><div class="div">我是第三个div</div><!--以上给出三个div测试效果--><br/><!--给三个按钮事件--><button onclick="shanchu1()">删除div</button><button onclick="shanchu2()">过滤删除div里class="div"的</button><button onclick="shanchu3()">删除div里的子元素</button><script>    //shanchu1事件，删除所有div元素    function shanchu1(){        $("div").remove();        //remove()删除方法    }    //shanchu2事件，删除div里，只有class="div" 的元素    function shanchu2(){        $("div").remove('.div');        //只会删除div元素里面带有class并且值等于div的元素    }    //shanchu3事件，删除div里面的所有子元素    function shanchu3(){        $("div").empty();        //删除被选元素下的所有子元素(包括内容)    }</script></body></html>

以上，我们在页面，打开检查代码，可以看到，执行shanchu1事件，所有div都被删除，同学们注意，这里是删除，并非隐藏，检查代码里的div也就消失了，而不是添加display属性隐藏哦。

remove()删除方法，它还可以带一个参数，就是过滤条件，在div元素里过滤，过滤条件是class="div"，所以我们在remove的括号里，带一个参数，写法和前的$("")是一样的，也就是找到，指定的意思，那么我们调用shanchu2事件，可以看到，只有第一个和第三个div被删除，因为过滤条件指向了它们。

shanchu3事件，里面用的是empty()方法，它也是删除，但不是删除此元素，而是删除此元素下面的所有元素，包括内容。所以我们检查源码会发现，三个div依旧存在，不过内容、元素等都被删除了。

本节课学的删除操作很简单，难点在于扩展，就看同学们在实战中，能否合理运用。

阅读全文

0 0