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”,不是没有道理的。