jQuery删除DOM结点

                         返回主页

在js中操作dom比较繁琐，代码如下

var childnode=document.getElementById("child");
var removednode=document.getElementById("father").removeChild(childnode);

在jQuery中，只需要这么做：

html代码

<li>
    <span class="deleleNodeSpan">
        <a href="#" class="deleleNode">【删除】</a>
     </span>
    <strong>
        <a href="./articles/Gson解析Demo.html">[15-11-20]Gson解析Demo</a>
    </strong>
</li>

jQuery代码

$(document).ready(function() {
    $(".deleleNode").click(function() {
        $(this).parent().parent().remove();
    });                 
});

效果图：

移除之前：

移除之后：

在这里我只是做一个示范，我用了比较笨的方法，因为想要删除包括this结点(触发动作的位置)在内的同级的上层结点，从而实现级联删除。

我们做的很简单，只需要找到结点，调用remove()方法即可。

remove()方法

remove() 方法移除被选元素，包括所有文本和子节点。
该方法不会把匹配的元素从 jQuery 对象中删除，
因而可以在将来再使用这些匹配的元素。
但除了这个元素本身得以保留之外，
remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、
附加的数据等都会被移除。这一点与 detach() 不同。

博客彩蛋

相信看了上述内容你也明白我是用什么原型进行了这个实验吧，哈哈。那么闲话不多说，好东西要一起分享，我已经上传这个页面，去试试吧，不要怕玩坏，just for fun!

list.html链接地址

http://www.wuwenliang.net/blog/list.html#

一些题外话

起因是要完成人机交互的大作业。

对，你没听错，人机交互，乍一听还以为是什么黑科技，其实说白了就是学习基本的javascript和jQuery。

稍微离下题，初期教javascript那位老师着实不错，几堂课就把闭包、回调、原型链等概念讲清楚了。后来换了一位老师教授我们jQuery，水平怎样我就不评价了，反正他很能吹就是了。咳咳，言归正传。

要做的作业中这个比较有趣，用jQuery进行列表页面的dom操作，实现模拟的后台管理效果。

小结

刚开始没有明显的觉得jQuery是一把瑞士军刀，现在想来那是当初没有能够较为深入的学习的缘故。随着学习的逐步加深，逐渐感到jQuery带给前端开发的便利是不能简单用语言叙述清楚的。难怪有人称其为“锋利的jQuery”，不是没有道理的。